0

enter image description here

I am creating a visualforce page and i want to add a dialog with the available values and another dialog that contains selected values and need two arrows between these dialogs to add and remove values like below image

1

I suggest you use this Multiselect Picklist Visualforce Component that you can add to your code base. It is configurable e.g.:

<c:MultiselectPicklist leftLabel="Available Contacts"
    leftOptions="{!allContacts}"
    rightLabel="Selected Contacts"
    rightOptions="{!selectedContacts}"
    size="14"
    width="150px"/>

and provides this user interface:

screen shot

If you want to, you can modify e.g. the style of the buttons.

0

Dueling Picklist of SLDS is also worth looking.

A dueling-picklist is used to move options between two lists and is often referred to as a multi-select. Sometimes, the list options can then be re-ordered, depending on the use case.

Code:

<div class="slds-form-element" role="group" aria-labelledby="picklist-group-label">
  <div id="picklist-group-label" class="slds-form-element__label slds-form-element__legend slds-text-title_caps">Select Options</div>
  <div 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-83">First Category</span>
      <div class="slds-dueling-list__options">
        <ul aria-describedby="option-drag-label" aria-labelledby="label-83" 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 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 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-84">Second Category</span>
      <div class="slds-dueling-list__options">
        <ul aria-describedby="option-drag-label" aria-labelledby="label-84" 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 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 xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">Move Selection Down</span>
      </button>
    </div>
  </div>
</div>

Design:

Dueling Picklist

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.