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.

4
  • Where is the table markup/code in which you are getting API names as labels? Oct 24, 2019 at 8:55
  • In helper class in oninitChange function
    – maria
    Oct 24, 2019 at 8:56
  • I mean in CMP/HTML, you did not show table implementation Oct 24, 2019 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, 2019 at 9:19

1 Answer 1

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);
4
  • Thank you for you response its working great
    – maria
    Oct 24, 2019 at 10:13
  • but I had a question can I use fieldDataWrapper wrapper class for it
    – maria
    Oct 24, 2019 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. Oct 24, 2019 at 10:38
  • can you please tell me how can I do that by using wrapper . Just for information .
    – maria
    Oct 24, 2019 at 10:48

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .