WPF-Forge/Forge.Forms

Field visibility binding

hashitha opened this issue · 11 comments

hashitha commented

I have the following field and I would like to make the text only visible if the checkbox is ticked. Can I bind the visibility?

image

<form>
  <title>RENAL TRACT ULTRASOUND</title>
  <heading>Patient details</heading>
  <row>
    <col>
      <text>Name: {ContextBinding FirstName} {ContextBinding LastName} ({ContextBinding GenderAsString})</text>
    </col>
    <col>
      <text>DOB: {ContextBinding DateOfBirth} ({ContextBinding AgeString})</text>
    </col>
  </row>
  <row>
    <col>
      <text>Patient ID: {ContextBinding PatientId}</text>
    </col>
    <col>
      <text>Accession: {ContextBinding PatientId}</text>
    </col>
  </row>
  <hr />
  <heading>Findings</heading>
  <row>
    <col >
      <text>Liver:</text>
    </col>
    <col>
      <input
        type="bool"
        name="NAD"
        label="NAD"></input>
    </col>
    <col>
      <input
        type="bool"
        name="ECHOGENIC"
        label="ECHOGENIC"></input>
    </col>
  </row>
  <br />
  <row>
    <col
      width="2">
      <row>
        <col>
          <input
            type="bool"
            name="has-portalVein"
            label="Portal Vein"></input>
        </col>
      </row>
      <row>
        <col>
          <input
            type="bool"
            name="has-cbd"
            label="CBD"></input>
        </col>
        <col>
          <input
            type="string"
            name="cbdVol"
            label="Vol (mm)"></input>
        </col>
      </row>
      <row>
        <col>
          <input
            type="bool"
            name="has-gallbladder"
            label="Gallbladder"></input>
        </col>
        <col>
          <input
            type="string"
            name="BladderVol"
            label="Vol (mm)"></input>
        </col>
      </row>
      <row>
        <col>
          <input
            type="bool"
            name="has-GBWall"
            label="GB Wall"></input>
        </col>
        <col>
          <input
            type="string"
            name="GBWallVol"
            label="(mm)"></input>
        </col>
      </row>
      <row>
        <col>
          <input
            type="bool"
            name="has-Pancrease"
            label="Pancrease:"></input>
        </col>
        <col>
          <input
            type="string"
            name="PancreaseComments"
            label="comments"></input>
        </col>
      </row>
      <row>
        <col>
          <input
            type="bool"
            name="has-Spleen"
            label="Spleen:"></input>
        </col>
        <col>
          <input
            type="string"
            name="SpleenVol"
            label="(mm)"></input>
        </col>
      </row>
      <row>
        <col>
          <input
            type="bool"
            name="has-RightKidney"
            label="Right Kidney:"></input>
        </col>
        <col>
          <input
            type="string"
            name="RightKidneyVol"
            label="(mm)"></input>
        </col>
      </row>
      <row>
        <col>
          <input
            type="bool"
            name="has-LeftKidney"
            label="Left Kidney:"></input>
        </col>
        <col>
          <input
            type="string"
            name="LeftKidneyVol"
            label="(mm)"></input>
        </col>
      </row>
      <row>
        <col>
          <input
            type="bool"
            name="has-Aorta"
            label="Aorta:"></input>
        </col>
        <col>
          <input
            type="string"
            name="AortaVol"
            label="(mm)"></input>
        </col>
      </row>
    </col>
    <col></col>
  </row>
  <row>
    <col>
      <text>Comments:</text>
    </col>
    <col>
      <input
        type="bool"
        name="NADcomments"
        label="NAD"></input>
    </col>
    <col>
      <input
        type="bool"
        name="other"
        label="Other"></input>
    </col>
  </row>
  <row>
    <textarea
      name="Comments"
      label="Comments" />
  </row>
  <row>
    <input
      type="string"
      name="Sonographer"
      label="Sonographer"></input>
  </row>
  <row>
    <action
      name="reset"
      content="RESET"
      icon="close"
      resets="true" />
    <action
      name="submit"
      content="SUBMIT"
      icon="check"
      validates="true" />
  </row>
</form>
edongashi commented

This should do it:

        <col>
          <input
            type="string"
            name="BladderVol"
            visible="{Binding has-gallbladder}"
            label="Vol (mm)"></input>
        </col>

the view jumps a little when you toggle it though, we should probably support a minHeight for row elements.

  • 👍1
edongashi commented

Or maybe add a hiddenMode="hidden|collapsed" if we want it to be hidden instead of collapse

hashitha commented

What does the hiddenmode do?

edongashi commented

It's not yet implemented but I just suggested an idea how to fix the jumping because of the size change. In WPF you have two modes of "non-visible", hidden and collapsed. hidden takes up space while collapsed does not affect layout. In this case we need to reserve the height for the text input.

Currently we only have visible=true|false where true=visible and false=collapsed.

hashitha commented

If you can fix the jumping issues with hiddenMode="hidden|collapsed" that would be the easiest option. Otherwise we have to set min-height for all the controls

edongashi commented

Yep it's better because if the font size changes so does min-height, plus you can't eyeball the exact height. I'll work on this. I'll post details of the final api. It will be a boolean but it's hard to find a suitable name, reservesSpaceOnHidden, hides, hidden instead of collapse...? I'm open to suggestions 😆

hashitha commented

Naming is the hardest thing in coding :D reservesSpaceOnHidden would work I guess

edongashi commented

Super quick solution (this could have been done from outside the library also)

<form>
  <row>
    <col>
      <input type="bool" name="MyCondition" />
    </col>
    <col> 
      <input
        type="string"
        name="BladderVol"
        visible="{Binding MyCondition|HideOnFalse}"
        label="Vol (mm)" />
    </col>
  </row>
</form>
edongashi commented

To register custom value converters:

Resource.ValueConverters["MyConverter"] = new MyConverter();

Which you can then use inside binding expressions.

edongashi commented

Boolean expressions now support converters by trailing |Converter

This will convert the final result of the evaluated expression

<form>
   <input type="bool" name="MyCondition1" />
   <input type="bool" name="MyCondition2" />
   <input type="string" name="BladderVol" visible="{Binding MyCondition1} &amp;&amp; {Binding MyCondition2} |HideOnFalse" label="Vol (mm)" />
</form>
  • 👍1
edongashi commented

Closing this if it's resolved. Writing &amp;&amp; for logical and looks annoying. We will probably add support for add or not as alternative tokens.