How to create a combo box with options from the list and select the option with the value in the data?

[daliboris]

How to create a combo box with options from the list and select the option with the value in the data?

Let's have two instances of data. The first one contains data to be edited:

<fx-instance>
 <data>
   <annotation target="#FACS.9d5c44dc-c026-4702-96f4-8a005963ee0a" motivation="commenting" xml:id="a.FA-CS.00001">
      <revisionDesc>
         <change xml:id="a.FA-CS.00001-c3" status="resolved" when="2024-04-19T15:59:00Z" who="#boris">Done</change>
         <change xml:id="a.FA-CS.00001-c2" status="pending" when="2024-04-19T13:59:00Z" who="#boris">Changed</change>
          <change xml:id="a.FA-CS.00001-c1" status="created" when="2024-04-19T10:59:00Z" who="#guest">Note</change>
      </revisionDesc>
    </annotation>
 </data>
</fx-instance>

The second one contains data referenced by @who attribute from first instance:

<fx-instance id="editors">
 <data>
   <respStmt xml:id="boris">
       <resp>developer</resp>
       <name>Boris Lehečka</name>
   </respStmt>
   <respStmt xml:id="guest">
       <resp>comments</resp>
       <name>Guest</name>
    </respStmt>
  </data>
 </fx-instance>

This is what I use for generating combo box (<select> HTML element) with names of editors.

<fx-control class="who">
 <select ref="instance('editors')/respStmt" class="widget">
  <template>
    <option value="{@xml:id}">{./name}</option>
  </template>
 </select>
 </fx-control>

What Fore feature should I use to select the appropriate option (i.e. set the @selected attribute) based on the value of the @who attribute from the following element?

<change xml:id="a.FA-CS.00001-c3" status="resolved" when="2024-04-19T15:59:00Z" who="#boris">Done</change>

Based on the discusion on the Slack I tried to use the @ref attribute on the <fx-control> and modified value of the @value attribute (to contain hash sign # at the beginning):

<fx-control class="who" ref="@xml:id">
  <select ref="instance('editors')/respStmt" class="widget">
    <template>
      <option value="{concat('#', @xml:id)}">{./name}</option>
    </template>
  </select>
 </fx-control>

Unfortunetaly this doesn't work for me too.

See the last line, where the value is #guest but the appropriate item is not selected in the combo box.

As you can see, options are generated but without the @selected attribute.

Here is the full code for the form above:

<fx-repeat id="r-annotation" ref="annotation">
 <template>
   <div>
     <fx-control class="motivation" id="annotation" ref="@motivation"></fx-control>
     <fx-control class="target" id="target" ref="@target"></fx-control>
     <fx-repeat id="r-change" ref="revisionDesc/change">
       <template>
           <fx-control class="who" ref="@xml:id">
             <select ref="instance('editors')/respStmt" class="widget">
               <template>
                 <option value="{concat('#', @xml:id)}">{./name}</option>
               </template>
             </select>
           </fx-control>
           <fx-control class="who" id="who" ref="@who"></fx-control>
           <fx-control class="status" id="change-status" ref="@status"></fx-control>
           <fx-control class="when" id="change-when" ref="@when"></fx-control>
           <fx-control class="text" id="change-text" ref="."></fx-control>
           <fx-trigger class="btn delete">
            <button>x</button>
            <fx-delete ref="."></fx-delete>
           </fx-trigger>
       </template>
     </fx-repeat>
     <fx-trigger class="btn insert">
      <button>+</button>
      <fx-insert ref="revisionDesc/change" origin="instance('change-template')/change" at="1" position="before"></fx-insert>
     </fx-trigger>
     <fx-trigger class="btn delete">
         <button>x</button>
         <fx-delete ref="."></fx-delete>
     </fx-trigger>
   </div>
 </template>
</fx-repeat>

[JoernT]

The value of the ref and the value of the option value must match - here you have an additional '#' in the values of the options.

A bit more explanation makes it hopefully clear - the value of the options are the candidates for the bound node (given by ref on fx-control. When a bound nodes has a value the control will lookup the matching values from the list of option values and select the item if found. Likewise when the user selects an option its value will become the value of the bound node.

[JoernT]

@daliboris you should actually set it as answered ;) if that's the case - otherwise - and if you need to have the 'hash' - let me know. There are other ways to get there.

[daliboris]

Thak you, @JoernT, for the explanation.

I made a mistake in the @ref attribute: it should refer to the @who attribute of the <change> element. Following code works:

 <fx-repeat id="r-change" ref="revisionDesc/change">
   <template>
       <fx-control class="who" ref="@who">
         <select ref="instance('editors')/respStmt" class="widget">
           <template>
             <option value="{concat('#', @xml:id)}">{./name}</option>
           </template>
         </select>
       </fx-control>
       <fx-control class="who" id="who" ref="@who"></fx-control>
       <fx-control class="status" id="change-status" ref="@status"></fx-control>
       <fx-control class="when" id="change-when" ref="@when"></fx-control>
       <fx-control class="text" id="change-text" ref="."></fx-control>
       <fx-trigger class="btn delete">
        <button>x</button>
        <fx-delete ref="."></fx-delete>
       </fx-trigger>
   </template>
 </fx-repeat>