1

I have been given a task to make query builder which will make query and fetch data accordingly . So I have completed it but while displaying the table I am not able to display the label name as heading . I am getting api name as table heading . So can anyone please suggest m the edits in my code. Here is the code

Apex controller:

public class FinalQueryBuilderApex {
  @AuraEnabled
   public static List<String> getObjectName(){
        List<String> objects=new List<String>();
       List<Schema.SObjectType> gd = Schema.getGlobalDescribe().Values();  
        for(SObjectType sot:gd){
           objects.add(sot.getDescribe().getName());
        }
       System.debug('objects'+objects);
        return objects;
    }
    @AuraEnabled
    public static List<String> listAllObject(){
        List<String> objectList = new List<String>();
        For(Schema.sObjectType sobj: schema.getGlobalDescribe().values()){
            if(sobj.getDescribe().isQueryable())
                objectList.add(sobj.getDescribe().getName()+'####'+sobj.getDescribe().getLabel());
        }
        objectList.sort();
        System.debug('objectList'+objectList);
        return objectList;
    }

  @AuraEnabled
public static Map<String, String> getObjectFields(String objName) {
    Map<String, String> retVal = new Map<String, String>();
    Map<String, Schema.SObjectField> fieldMap = Schema.getGlobalDescribe().get(objName).getDescribe().fields.getMap();
    for (String fieldName: fieldMap.keySet()) {  
        retVal.put(fieldMap.get(fieldName).getDescribe().getName(), fieldMap.get(fieldName).getDescribe().getLabel());
    }
     System.debug('retVal'+retVal);
    return retVal;

}

Helper class:

({
onInit : function(component, event, helper) {
        /* Call the Apex class method to fetch the List of all object */
        var action = component.get('c.listAllObject');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS' && component.isValid()){
                /* set the value to the attribute of the component */
                var responseValue = response.getReturnValue();
                var lstOptions = [];
                for(var i=0; i < responseValue.length; i++){
                    lstOptions.push({
                        value : responseValue[i].split('####')[1],
                        key : responseValue[i].split('####')[0]
                    });
                }
                lstOptions.sort();
                component.set('v.objectList', lstOptions);

            }else{
                var errors = response.getError();
                $A.log(errors);
                if(errors || errors[0].message){
                    console(errors[0].message);
                }
            }
        });
        $A.enqueueAction(action);
    },

            });
            action.setCallback(this, function(response){
                var state = response.getState();
                if( state === 'SUCCESS' && component.isValid()){
                    component.find('sfdcDiv').set("v.body",[]);
                    var responseValue=response.getReturnValue();
                    // var responseValue = JSON.parse(response.getReturnValue());
                    //var responseValue = JSON.stringify(response.getReturnValue());
                    console.log('responseValue',responseValue);
                    //component.set( "v.listofrecords", response.getReturnValue() );
                    var objectValue   = responseValue.sObjectData;
                    var fieldList     = component.get("v.selectedArray");//responseValue.fieldList;
                    console.log('objectValue'+objectValue);
                    console.log('fieldList'+fieldList);
                    /* Create Dynamic Table */
                    var sObjectDataTableHeader = [];
                    // Create table Header
                    for (var i=0; i <  fieldList.length; i++) {
                        sObjectDataTableHeader.push(fieldList[i]);
                    }
                    console.log(sObjectDataTableHeader);
                    //Get the count of columns.
                    var columnCount = sObjectDataTableHeader.length;
                    //Create a HTML Table element.
                    var table = document.createElement("TABLE");
                    //table.border = "1";
                    //Add the header row.
                    var row = table.insertRow(-1);
                    for (var i = 0; i < columnCount; i++) {
                        var headerCell = document.createElement("TH");
                        headerCell.innerHTML = sObjectDataTableHeader[i];
                        headerCell.className='hearderClass';
                        row.appendChild(headerCell);
                    }
                    var dvTable = document.getElementById("sfdctable");
                    dvTable.innerHTML = "";
                    dvTable.appendChild(table);
                    /* Create Dynamic Table End */

                    if(objectValue.length){
                        for(var j=0; j < objectValue.length; j++){
                            // Dynamic table Row
                            row = table.insertRow(-1);
                            // Dynamic Table Row End 
                            for (var i=0; i <  fieldList.length; i++) {
                                // Dynamic table Row
                                var cell = row.insertCell(-1);
                                cell.innerHTML = objectValue[j][fieldList[i]];
                                component.set('v.isSending' , false);

                            }
                        }
                    }else{

                    }
                }else{
                    var errors = response.getError();
                    $A.log('Error Details '+errors);
                    if( errors || errors[0].message){
                        console.log('Error Details '+errors[0].message);
                    }
                }
            });
            $A.enqueueAction(action);
        }else{
            component.set('v.isSending' , false);
        }
    },
})

COmponent:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="FinalQueryBuilderApex" >
 <aura:handler name='init' value='{!this}' action='{!c.doInit}' />
    <aura:attribute name='objectList' type='List' />
<aura:attribute name="options" type="List" />
    <aura:attribute name="selectedArray" type="List" default="[]"/>
    <div class="slds-m-around_small">
        <div class="slds-page-header">

        </div><br/>
        <div class="slds-grid slds-wrap">
            <div class="slds-size_1-of-2">
                <div class="slds-box_x-small">
                    <!-- show the list of All the Object -->
                    <lightning:select name="selectObject" label="Select an Object" 
                                      onchange="{!c.doHandlingChange}" aura:id='selectObject'>
                        <option value="" text="- None -" />
                        <aura:iteration items='{!v.objectList}' var='obj'>
                            <option value="{!obj.key}" text="{!obj.value}" />
                        </aura:iteration>
                    </lightning:select>
                </div>
            </div>
            </div>
            <br/>
    <lightning:dualListbox name="fields"  
                       label= "Fields" 
                       sourceLabel="Available" 
                       selectedLabel="Selected" 
                       fieldLevelHelp="This is a dual listbox" 
                       options="{!v.options}" 
                        onchange="{! c.handleChange }"   
                      />
     Selected Values : 

    <aura:iteration items="{!v.selectedArray}" var="val" indexVar="indvar">
        <li>
            {!val}
        </li>

    </aura:iteration>
                <lightning:button variant="brand" label="Query" onclick="{! c.doHandleChange}" />

    </div>
         <ui:scrollerWrapper class="scrollerSize">
                <div class="slds-size_2-of-2">
                    <div id='sfdctable' aura:id='sfdcDiv'>
                        <!-- devision that will show the dynamic content -->

                    </div>
                </div>
            </ui:scrollerWrapper>
</aura:component>

Controller:

({
    doInit : function(component, event, helper) {
        helper.onInit(component, event, helper);
    },
    doHandlingChange : function(component, event, helper) {
        helper.init2winit(component, event, helper);
    },

Please help me out . Any suggestions are welcome.

  • Where is the table markup/code in which you are getting API names as labels? – salesforce-sas Oct 24 '19 at 8:55
  • In helper class in oninitChange function – maria Oct 24 '19 at 8:56
  • I mean in CMP/HTML, you did not show table implementation – salesforce-sas Oct 24 '19 at 9:13
  • <ui:scrollerWrapper class="scrollerSize"> <div class="slds-size_2-of-2"> <div id='sfdctable' aura:id='sfdcDiv'> <!-- devision that will show the dynamic content --> </div> </div> </ui:scrollerWrapper> I am showing table over here as it is dynamic it will selelct all the things from helper class and only display it in this area – maria Oct 24 '19 at 9:19
1

Problem is, You are injecting API name in line below:

for (var i=0; i <  fieldList.length; i++) {
      sObjectDataTableHeader.push(fieldList[i]);
  }

You need to get the options which you got earlier for dualListbox and get the label through the API name as below: (add below lines in onHandleChange method near line comment // Create table Header)

    // get labels against api names 
    let selectedFieldsApiToLabelMap = component.get("v.options").reduce(function(accumulator, currentOption) {
        accumulator[currentOption.value] = currentOption.label;
        return accumulator;
    }, {});

    // Create table Header
    for (var i=0; i <  fieldList.length; i++) {
        sObjectDataTableHeader.push(selectedFieldsApiToLabelMap[fieldList[i]]);
    }
    console.log(sObjectDataTableHeader);
  • Thank you for you response its working great – maria Oct 24 '19 at 10:13
  • but I had a question can I use fieldDataWrapper wrapper class for it – maria Oct 24 '19 at 10:26
  • Yes you can but you do not really do that as you are already storing the same data in component as options which you are getting for dualListbox. Using the wrapper class will only increase the complexity of code. – salesforce-sas Oct 24 '19 at 10:38
  • can you please tell me how can I do that by using wrapper . Just for information . – maria Oct 24 '19 at 10:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.