[as13969]

Dear PM Gurus,

I have a requirement to design a form that the textbox area is under its label meaning they are not in the same row.
When I used the show/hide condition obviously it only show/hide the textbox field and not the label. Is it possible to show/hide form field and form label that are not in the same row?

Thanks, in advance.

[amosbatto]

Here is the XML code for a form that you can use:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<dynaForm name="9488083985b761e9fb77018056822281/6731016745b761eb3d9cad6058326265" enabletemplate="0" type="xmlform" width="500" mode="" nextstepsave="prompt" printdynaform="" adjustgridswidth="">
  <satisfiedErgonomics type="dropdown" required="0" readonly="0" optgroup="0" mode="edit">
    <en>16. Are you satisfied with the ergonomics of            
      <option name="">--select--</option>
      <option name="yes">Yes</option>
      <option name="no">No</option></en>
  </satisfiedErgonomics>
  <whatLike type="textarea" required="0" readonly="0" rows="2" cols="32" mode="edit" optgroup="0">
    <en>16a. What do you like about it?</en>
  </whatLike>
  <whatPartProcedures type="textarea" required="0" readonly="0" rows="2" cols="32" mode="edit" optgroup="0">
    <en>16b. Why? In what part of the procedures?</en>
  </whatPartProcedures>
  <showHideCode type="javascript" meta=""><![CDATA[function showHideErgonomics() {
  var ergo = getValueById("satisfiedErgonomics");
  
  if (ergo == "yes") {
    visibleById("whatLike");
    visibleById("whatPartProcedures");
  }
  else if (ergo == "no") {
    hiddenById("whatLike");
    visibleById("whatPartProcedures");
  }
  else {
    hiddenById("whatLike");
    hiddenById("whatPartProcedures");
  }
}

//execute when the value of the dropdown changes
getField("satisfiedErgonomics").onchange = showHideErgonomics;
  
showHideErgonomics(); //execute when the dynaform loads]]></showHideCode>
  <submit type="submit" required="0" readonly="0" optgroup="0">
    <en>Submit</en>
  </submit>
</dynaForm>

See the Javascript part and see the descriptions of the functions in the code here:
https://wiki.processmaker.com/index.php ... ible.28.29

You can edit the form's HTML to place the labels above the fields, but make sure to do this as the last step in designing your process, because once you start playing with the HTML, you can't edit or delete fields in the field.

[as13969]

Thank you Amos for the quick response! I should have done the modification of HTML in the end of the step.