3

was wondering if anyone had any suggestions for how to do styling of a multi-picklist in a lightning manner within a visualforce page?

<apex:repeat value="{!$ObjectType.Surgery__c.FieldSets[fixed]}" var="field">
    <div class=".slds-dueling-list">
        <!-- Method 1 -->
        <apex:inputField value="{!fs[field]}" /> 

        <!-- Method 2 -->
        <apex:inputField value="{!fs[field]}" styleClass="slds-input"/>

        <!-- Method 3 -->
        <apex:selectList multiselect="true" styleClass="slds-input">
            <apex:selectOptions value="{!fs[field]}"/>
        </apex:selectList>
    </div>
</apex:repeat>

If anyone has any suggestions about what I'm doing wrong (I'm pretty sure I'm doing method 3 incorrectly but I'm not sure how to fix it)

All of the methods above don't produce anything that's particularly appealing to look at

Image of what the different methods look like

-2

Have you tried SLDS Dueling Picklist?

Check this out: SLDS Dueling Picklist

Markup:

<div data-reactroot="" class="slds-dueling-list">
    <div class="slds-assistive-text" id="drag-live-region" aria-live="assertive">
    </div>
    <div class="slds-assistive-text" id="option-drag-label">
        Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.
    </div>
    <div class="slds-dueling-list__column">
        <span class="slds-form-element__label" id="label-7">
            First Category
        </span>
        <div class="slds-dueling-list__options" role="application">
            <ul aria-describedby="option-drag-label" aria-labelledby="label-7" aria-multiselectable="true" class="slds-listbox slds-listbox_vertical" role="listbox">
                <li role="presentation" class="slds-listbox__item">
                    <div class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline" aria-selected="false" draggable="true" role="option" tabindex="0">
                        <span class="slds-media__body">
                            <span class="slds-truncate" title="Option 1">
                                Option 1
                            </span>
                        </span>
                    </div>
                </li>
                <li role="presentation" class="slds-listbox__item">
                    <div class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline" aria-selected="false" draggable="true" role="option" tabindex="-1">
                        <span class="slds-media__body">
                            <span class="slds-truncate" title="Option 2">
                                Option 2
                            </span>
                        </span>
                    </div>
                </li>
                <li role="presentation" class="slds-listbox__item">
                    <div class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline" aria-selected="false" draggable="true" role="option" tabindex="-1">
                        <span class="slds-media__body">
                            <span class="slds-truncate" title="Option 3">
                            Option 3
                            </span>
                        </span>
                    </div>
                </li>
                <li role="presentation" class="slds-listbox__item">
                    <div class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline" aria-selected="false" draggable="true" role="option" tabindex="-1">
                        <span class="slds-media__body">
                            <span class="slds-truncate" title="Option 6">
                            Option 6
                            </span>
                        </span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="slds-dueling-list__column">
        <button class="slds-button slds-button_icon slds-button_icon-container" title="Move Selection to Second Category">
            <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">
                </use>
            </svg>
            <span class="slds-assistive-text">Move Selection to Second Category
            </span>
        </button>
        <button class="slds-button slds-button_icon slds-button_icon-container" title="Move Selection to First Category">
            <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">
                </use>
            </svg>
            <span class="slds-assistive-text">
                Move Selection to First Category
            </span>
        </button>
    </div>
    <div class="slds-dueling-list__column">
        <span class="slds-form-element__label" id="label-8">
            Second Category
        </span>
        <div class="slds-dueling-list__options" role="application">
            <ul aria-describedby="option-drag-label" aria-labelledby="label-8" aria-multiselectable="true" class="slds-listbox slds-listbox_vertical" role="listbox">
                <li role="presentation" class="slds-listbox__item">
                    <div class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline" aria-selected="false" draggable="true" role="option" tabindex="0">
                        <span class="slds-media__body"><span class="slds-truncate" title="Option 4">
                            Option 4
                            </span>
                        </span>
                    </div>
                </li>
                <li role="presentation" class="slds-listbox__item">
                    <div class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline" aria-selected="false" draggable="true" role="option" tabindex="-1">
                        <span class="slds-media__body">
                            <span class="slds-truncate" title="Option 5">
                                Option 5</span>
                        </span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="slds-dueling-list__column">
        <button class="slds-button slds-button_icon slds-button_icon-container" title="Move Selection Up">
            <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#up">
                </use>
            </svg>
            <span class="slds-assistive-text">Move Selection Up</span>
        </button>
        <button class="slds-button slds-button_icon slds-button_icon-container" title="Move Selection Down">
            <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#down">
                </use>
            </svg>
            <span class="slds-assistive-text">
                Move Selection Down
            </span>
        </button>
    </div>
</div>

Replace <svg><svg/> with desired icons(slds-icon utility-sprite right,left,up,down). Iterate the <li> with your data. Hope this helps.

| improve this answer | |
  • I did try that, but it seems that I have to know how many elements are present first? Or more like I since I'm pulling it from a fieldset I don't know how to iterate through all the elements and display them like that – user49458 Jan 11 '18 at 14:14
  • Try using this (my) component via lightning out: github.com/rapsacnz/DualSelect – Caspar Harmer Nov 1 '18 at 8:01

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.