• Augusta Gunn
  • NEWBIE
  • 0 Points
  • Member since 2014
  • Data Director
  • Support For Families

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 1
    Likes Given
  • 0
    Questions
  • 1
    Replies
We have an exisitng VF page where FIELDSETS is been used. FIELDSET has multiple fields like Text,Textarea,checkbox,richtext etc.
We have to apply lightning stye using Lightning desgin system but since the fields are commign dynamically .
We are unable to render styles on individual fields . Is there any solution on this ?


            <apex:pageBlockSection title="Information" columns="1" showHeader="true" 
                collapsible="false" rendered="{!layoutType == 1}">
               
                <apex:repeat value="{!$ObjectType.INFO__c.FieldSets.Marketing_Information}" var="field">
                    <apex:inputField value="{!objInteraction[field]}"/>
                </apex:repeat>
            </apex:pageBlockSection>
 
Hi I need help from a Lightning Guru.
I'm trying to use the lightning:dualListbox, the example of salesforce help is pretty easy, link.
What I need is to get the campaigns created in the system to select a few.
Here is my code: Component:
<aura:component access="global" implements="flexipage:availableForAllPageTypes" controller="MassEmailController">
<aura:attribute name="listOptions" type="List"/>
<aura:attribute name="selectedOptions" type="List"/>
<aura:handler name="init" value="{! this }" action="{! c.initialize }"/>
<div class="container slds-card">
    <header class="slds-card__header">
        <div class="slds-path">
            <div class="slds-grid slds-path__track">
                <div class="slds-grid slds-path__scroller-container">
                    <div class="slds-path__scroller" role="application">
                        <div class="slds-path__scroller_inner">
                            <ul class="slds-path__nav" role="listbox" aria-orientation="horizontal">
                                <li class="slds-path__item slds-is-current slds-is-active" role="presentation">
                                    <a aria-selected="true" class="slds-path__link" href="javascript:void(0);" id="path-1" role="option" tabindex="0">
                                        <span class="slds-path__stage">
                                            <!-- svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check" />
                                            </svg -->
                                            <span class="slds-assistive-text">Selected</span>
                                        </span>
                                        <span class="slds-path__title">Campaigns</span>
                                    </a>
                                </li>
                                <li class="slds-path__item slds-is-incomplete" role="presentation">
                                    <a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-2" role="option" tabindex="-1">
                                        <span class="slds-path__stage">
                                            <!-- svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check" />
                                            </svg -->
                                            <span class="slds-assistive-text">Selected</span>
                                        </span>
                                        <span class="slds-path__title">Contacts</span>
                                    </a>
                                </li>
                                <li class="slds-path__item slds-is-incomplete" role="presentation">
                                    <a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-3" role="option" tabindex="-1">
                                        <span class="slds-path__stage">
                                            <!-- svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check" />
                                            </svg -->
                                            <span class="slds-assistive-text">Content</span>
                                        </span>
                                        <span class="slds-path__title">Content</span>
                                    </a>
                                </li>
                            </ul>
                            <div class="slds-path__scroll-controls">
                                <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1" title="Scroll left">
                                    <!-- svg class="slds-button__icon" aria-hidden="true">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left" />
                                    </svg -->
                                    <span class="slds-assistive-text">Scroll left</span>
                                </button>
                                <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1" title="Scroll right">
                                    <!-- svg class="slds-button__icon" aria-hidden="true">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#right" />
                                    </svg -->
                                    <span class="slds-assistive-text">Scroll right</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="slds-card__body slds-card__body_inner">
        <div id="step-campaigns" class="slds-is-expanded">
            <lightning:dualListbox aura:id="selectOptions" name="Select Campaigns"  label="Select Campaigns" 
                       sourceLabel="Available campaigns" 
                       selectedLabel="Selected campaigns" 
                       options="{! v.listOptions }"
                       value="{! v.selectedOptions }"
                       onchange="{! c.handleChange }"/>
        </div>
        <div id="step-contacts" class="slds-is-collapsed">
            <lightning:layout horizontalAlign="start">
                <lightning:layoutItem flexibility="grow">
                    <lightning:input type="email" label="Add recipient" name="email" />
                </lightning:layoutItem>
                <lightning:layoutItem flexibility="shrink">
                    <lightning:buttonIcon iconName="utility:add" variant="neutral" onclick="{! c.handleRecipientAdd }" alternativeText="Add" />
                </lightning:layoutItem>
            </lightning:layout>
            <table id="contacts-table" class="slds-table slds-table_bordered slds-table_resizable-cols slds-table_fixed-layout" role="grid">
                <tr class="slds-line-height_reset">
                     <th class="slds-text-align_right" scope="col" style="width: 3.25rem;">
                         <div class="slds-th__action slds-th__action_form">
                             <span class="slds-checkbox">
                                 <input type="checkbox" name="select-all" id="checkbox-all" tabindex="-1" value="off" />
                                 <label class="slds-checkbox__label" for="checkbox-all">
                                     <span class="slds-checkbox_faux"></span>
                                     <span class="slds-form-element__label slds-assistive-text">Select All</span>
                                 </label>
                             </span>
                         </div>
                    </th>
                    <th aria-sort="none" class="slds-is-resizable slds-text-title_caps" aria-label="Name" scope="col">
                        <span class="slds-truncate" title="First Name">First Name</span>
                    </th>
                    <th aria-sort="none" class="slds-is-resizable slds-text-title_caps" aria-label="Name" scope="col">
                        <span class="slds-truncate" title="Last Name">Last Name</span>
                    </th>
                    <th aria-sort="none" class="slds-is-resizable slds-text-title_caps" aria-label="Name" scope="col">
                        <span class="slds-truncate" title="Company">Company</span>
                    </th>
                    <th aria-sort="none" class="slds-is-resizable slds-text-title_caps" aria-label="Name" scope="col">
                        <span class="slds-truncate" title="Email">Email</span>
                    </th>
                </tr>
            </table>
        </div>
        <div id="step-content" class="slds-is-collapsed">
            <lightning:layout horizontalAlign="start">
                <lightning:layoutItem flexibility="grow">
                    <lightning:select name="select-template" label="Select a Template" required="true">
                    </lightning:select>
                </lightning:layoutItem>
                <lightning:layoutItem flexibility="grow">
                    <lightning:select name="select-sender" label="Select a Sender" required="true">
                    </lightning:select>
                </lightning:layoutItem>
            </lightning:layout>
            <lightning:input type="text" label="Subject" name="subject" />
            <lightning:inputRichText />
        </div>
    </div>
    <footer class="slds-card__footer">
        <lightning:layout horizontalAlign="spread">
            <lightning:layoutItem flexibility="shrink">
                <lightning:button variant="destructive" label="Restart" onclick="{! c.handleRestart }" />
            </lightning:layoutItem>

            <lightning:layoutItem flexibility="shrink">
                <lightning:button variant="neutral" label="Back" onclick="{! c.handleBack }" />
                <lightning:button variant="brand" label="Next" onclick="{! c.handleNext }" />
            </lightning:layoutItem>
        </lightning:layout>
    </footer>
</div>

The important part of component are the attributes and the lightning:dualListbox:
<div id="step-campaigns" class="slds-is-expanded">
            <lightning:dualListbox aura:id="selectOptions" name="Select Campaigns"  label="Select Campaigns" 
                       sourceLabel="Available campaigns" 
                       selectedLabel="Selected campaigns" 
                       options="{! v.listOptions }"
                       value="{! v.selectedOptions }"
                       onchange="{! c.handleChange }"/>
        </div>
Also here is the js controller of the component:
({
initialize: function (component, event, helper) {
    var campaigns = component.get("c.getCampaigns");

    campaigns.setCallback(this, function(response) {

        var state = response.getState();

        if (component.isValid() && state == 'SUCCESS') {                
            component.set("v.listOptions", response.getReturnValue());
        } else {
            console.log('Failed with state: ' + state);
        }
    });

    $A.enqueueAction(campaigns); 

},
handleChange: function (cmp, event) {
    // Get the list of the "value" attribute on all the selected options
    var selectedOptionsList = event.getParam("value");
    alert("Options selected: '" + selectedOptionsList + "'");
}

And my apex controller:
public with sharing class MassEmailController {

    @AuraEnabled
    public static List<Campaign> getCampaigns(){
        system.debug('getCampaigns Controller');
        List<Campaign> cpList = [SELECT  ID,NAME FROM Campaign];

        return cpList;
    }
}

So the problem is that when I assigned the response value to my attribute listOptions that is the parameter of options in the lightning:dualListbox where should go the list of available campaigns. The component is empty and no error is shown.
If someone has a solution and can help me I would appreciate it very much.
Thanks and best regards