Clay: [Dual List Box] List Order

[drakonux]

Hi,

Sometimes we make design decisions based on our knowledge, based on books, or why not saying it because we have an assumption and we decide to take the risk of developing it. We should test before developing something.

Said this, we decided to place the "In Use" list on the left (the one that can reorder items) and the "Available" list on the right for Dual List, and a product team disagrees with that decision. The reasoning why we did this can be read following comments on LEXI-1036 and in the original request LEXI-804 with the definition document for Dual List.

So we decided to request a test to team-research DESRES-58. And it was a good idea because the conclusion of the test was the following:

_Some users highlighted that the convenience of the order is related to the task to be performed:_

_- If they have to review items that are previously selected, they prefer the "Selected" box to be on the left._
_- If they have to move unselected items to selected, they prefer the unselected box to be on the left._

However:

_The usual pattern in other products on the market is Unselected-Selected. Modifying this pattern would not be based on any data that we have so far._

Thus we would like to ask you if the order of the lists can be swapped on-demand based on a property instead of having a fixed decision about which is the right order placing lists. Besides, we would like to know the cost of doing this vs changing the logic to have the reorderable list on the right forever.

[pat270]

From my quick analysis, swapping on demand shouldn't be too difficult. We would just render the "In Use" items on the right and "Available" items on the left.

[drakonux]

Well, based on it is easier to provide a property instead of changing the current order to just have one option. We officially request to have a property to allow designers/developers to decide the list order they would like to have using the dual list in their products.

Do you need a new ticket to work on it?

ps. We will give a recommendation on the Lexicon site based on the conclusions of the component research and recommending consistency across a product. Besides, we will update our documentation.

[pat270]

I think we can continue using this one.

[pat270]

@drakonux I took a closer look. I don't think this is an issue with the Clay component. You can choose what to place on the left and right. See https://github.com/liferay/clay/blob/master/packages/clay-form/stories/index.tsx#L97-L109. This seems more like an issue with InputMoveBoxes in Portal which is using older code.

I just tested liferay-ui:input-move-boxes and they can be swapped as well.

<liferay-ui:input-move-boxes
  leftBoxName="currentEntryColumns"
  leftList="<%= leftList %>"
  leftReorder="<%= Boolean.TRUE.toString() %>"
  leftTitle="current"
  rightBoxName="availableEntryColumns"
  rightList="<%= rightList %>"
  rightTitle="available"
/>

I think we can close this one, unless I'm missing an important detail.

[drakonux]

Fantastic Patrick 🎉 thanks a lot!