Design "Note" fields

[latin-panda]

Description

Collect and Enketo do not distinguish between static and dynamic read-only fields. In Web Forms, static read-only fields are displayed as plain text and may include additional formatting. The engine internally categorizes these differently, for example, as NoteNode or InputNode.

We should re-evaluate whether this distinction adds value, or if Web Forms should simply display the standard read-only version of input fields and widgets (which simplifies the engine and Vue client code)

Sample form

<?xml version="1.0"?>
<h:html xmlns="http://www.w3.org/2002/xforms" xmlns:h="http://www.w3.org/1999/xhtml"
  xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsd="http://www.w3.org/2001/XMLSchema"
  xmlns:jr="http://openrosa.org/javarosa" xmlns:orx="http://openrosa.org/xforms"
  xmlns:odk="http://www.opendatakit.org/xforms">
  <h:head>
    <h:title>Notes</h:title>
    <model odk:xforms-version="1.0.0">
      <instance>
        <data id="notes" version="20240802121047">
          <group>
            <intro />
            <note_w_hint />
            <note_hint_only />
            <note_w_default>A value</note_w_default>
            <note_w_calculation />
            <note_w_masked_appearance />
            <note_w_ex_appearance />
            <read_only_int />
            <read_only_int_value>3</read_only_int_value>
            <note_calc_decimal_from_int />
            <date_note>2025-12-21T23:30:05</date_note>
            <geopoint_note>38.253094215699576 21.756382658677467 0 150</geopoint_note>
            <geotrace_note>37.7749 -122.4194 0 0; 37.775 -122.419 0 0; 37.774 -122.420 0 0</geotrace_note>
            <geoshape_note>37.7749 -122.4194 0 0; 37.775 -122.419 0 0; 37.774 -122.420 0 0; 37.7749 -122.4194 0 0</geoshape_note>
          </group>
          <meta>
            <instanceID />
          </meta>
        </data>
      </instance>
      <bind nodeset="/data/group/intro" readonly="true()" type="string" />
      <bind nodeset="/data/group/note_w_hint" readonly="true()" type="string" />
      <bind nodeset="/data/group/note_hint_only" readonly="true()" type="string" />
      <bind nodeset="/data/group/note_w_default" readonly="true()" type="string" />
      <bind nodeset="/data/group/note_w_calculation" readonly="true()" type="string"
        calculate="concat(&quot;A &quot;, &quot;value&quot;)" />
      <bind nodeset="/data/group/note_w_masked_appearance" readonly="true()" type="string" />
      <bind nodeset="/data/group/note_w_ex_appearance" readonly="true()" type="string" />
      <bind nodeset="/data/group/read_only_int" type="int" readonly="true()" />
      <bind nodeset="/data/group/read_only_int_value" type="int" readonly="true()" />
      <bind nodeset="/data/group/note_calc_decimal_from_int" type="decimal"
        calculate="/data/group/read_only_int_value + 1.5" readonly="true()" />
      <bind nodeset="/data/group/date_note" type="date" readonly="true()" />
      <bind nodeset="/data/group/geopoint_note" type="geopoint" readonly="true()" />
      <bind nodeset="/data/group/geotrace_note" type="geotrace" readonly="true()" />
      <bind nodeset="/data/group/geoshape_note" type="geoshape" readonly="true()" />
      <bind nodeset="/data/meta/instanceID" type="string" readonly="true()" jr:preload="uid" />
    </model>
  </h:head>
  <h:body>
    <group appearance="field-list" ref="/data/group">
      <input ref="/data/group/intro">
        <label>This form illustrates the note concept in ODK. This is not a concept that exists in
          the underlying ODK XForms spec, it's introduced by XLSForm and discussed informally.
          Typically a note only has a label.</label>
      </input>
      <input ref="/data/group/note_w_hint">
        <label>A note with a hint</label>
        <hint>This is a hint</hint>
      </input>
      <input ref="/data/group/note_hint_only">
        <label></label>
        <hint>Hint-only note</hint>
      </input>
      <input ref="/data/group/note_w_default">
        <label>A note with a default value</label>
      </input>
      <input ref="/data/group/note_w_calculation">
        <label>A note with a calculation</label>
      </input>
      <input appearance="masked" ref="/data/group/note_w_masked_appearance">
        <label>A note with masked appearance</label>
      </input>
      <input appearance="ex:my.cool.app()" ref="/data/group/note_w_ex_appearance">
        <label>A note with external app appearance</label>
      </input>
      <input ref="/data/group/read_only_int">
        <label>A readonly integer</label>
      </input>
      <input ref="/data/group/read_only_int_value">
        <label>A readonly integer with value</label>
      </input>
      <input ref="/data/group/note_calc_decimal_from_int">
        <label>A note with decimal type calculated from int</label>
      </input>
      <input ref="/data/group/date_note">
        <label>A note with date type</label>
      </input>
      <input ref="/data/group/geopoint_note">
        <label>A note with geopoint type</label>
      </input>
      <input ref="/data/group/geotrace_note">
        <label>A note with geotrace type</label>
      </input>
      <input ref="/data/group/geoshape_note">
        <label>A note with geoshape type</label>
      </input>
    </group>
  </h:body>
</h:html>

---

Checklist

• Does it need UI/UX design?
  • Yes. Describe the UI/UX requirements or attach a Figma link in the "Design" section.
  • No
• Does it need API design?
  • Yes. Specify the endpoints, methods, or data structures needed.
  • No
• Does it need design around state flow?
  • Yes. Outline the state flow requirements.
  • No
• Does it need a test plan?
  • Yes. Add the test plan as a comment in this task or attach the document.
  • No

---

User Stories

• As a [user type],
  I want [functionality],
  so that [benefit].

---

Design

• Figma: [Insert URL]
• Design Docs: [Insert URL]

---

Dependencies

---

Additional Notes

---

Related Issues