0

I am re-styling existing VF pages. I have an inputField that is rendered as multiSelectPickList. I tried using 'slds-dueling-list', but I am not sure the code is right. There is no example code on the inputField with SLDS style class on lightning design system site. Does anyone has sample code?

0

1 Answer 1

1

You can still extract the code that they use to generate that particular HTML markup. The only issue is that it's still in development and may change.

Just right-click and select "Inspect" (or similar for non-chrome browsers).

You will then be able to copy the HTML code.

Here is the code I extracted to build my own DuellingPicklist implementation, with the SVG buttons replaced with lightning:icons. The code is static but with some effort, you should be able recreate this functionality.

By some effort, I mean quite a lot. My version is over 500 loc in helper class.

Here is the static code:

<div class="slds-dueling-list">
  <div class="slds-assistive-text" id="drag-live-region" aria-live="assertive"/>
  <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-3">First Category</span>
    <div class="slds-dueling-list__options" role="application">
      <ul aria-describedby="option-drag-label" aria-labelledby="label-3" 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>
      </ul>
    </div>
  </div>
  <div class="slds-dueling-list__column">
    <button class="slds-button slds-button_icon-container slds-button_icon-small" title="Right" >
        <lightning:icon iconName="utility:right" size="small" class="slds-button__icon slds-button__icon_large" />
        <span class="slds-assistive-text">Move Selection to Second Category</span>
    </button>
    <button class="slds-button slds-button_icon-container slds-button_icon-small" title="Left" >
        <lightning:icon iconName="utility:left" size="small" class="slds-button__icon slds-button__icon_large" />
        <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-4">Second Category</span>
    <div class="slds-dueling-list__options" role="application">
      <ul aria-describedby="option-drag-label" aria-labelledby="label-4" 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>
      </ul>
    </div>
  </div>
  <div class="slds-dueling-list__column">
    <button class="slds-button slds-button_icon-container slds-button_icon-small" title="Up" >
        <lightning:icon iconName="utility:up" size="small" class="slds-button__icon slds-button__icon_large" />
        <span class="slds-assistive-text">Move Selection up</span>
    </button>
    <button class="slds-button slds-button_icon-container slds-button_icon-small" title="Down" >
        <lightning:icon iconName="utility:down" size="small" class="slds-button__icon slds-button__icon_large" />
        <span class="slds-assistive-text">Move Selection down</span>
    </button>
  </div>
</div>
2
  • Thank you Casper. Just wondering if it is possible to use it with no SLDS, I mean the normal Visual Force way only for this component? I tried that too but since slds is applied at page level, the arrow buttons still do not show as expected.
    – Quest_sfdc
    Commented Apr 26, 2018 at 14:38
  • No, I don't think so. You'll need to build a custom duelling select list and add it using lightning out. You can use this markup above + combined with my duellng select list here: github.com/rapsacnz/DualSelect. Commented Apr 26, 2018 at 17:16

You must log in to answer this question.

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