Hoppa till huvudinnehållet

Enable repeat of elements in form

Anna Jose
Redigerad

I am new to Workflow, so I'm not sure if this is possible. I'm creating a form, and was hoping Vertigis has similar capability to Survey123 where you can create repeats. For example, a user can choose a single value from a drop down, but if they want to enter more values they'll have to click on a button that'll show the drop down again, and they can choose the second value. They can repeat this multiple times if they require. Essentially creating a 1:many relationship. 

Other than drop-down list I would need this repeat functionality for text questions as well.

Or if that's not possible, maybe the user can choose the number of drop downs/text boxes etc. they'd like, and the corresponding number of elements would appear?

0

Kommentarer

3 kommentarer

Datum Röster
  • Berend Veldkamp

    I don't think this is possible by default, but you can program this yourself. 

    For the drop down, example, you could use the change event, and add an Add Form Element there. 

    A simpler but less flexible approach would be to add a number of elements in advance, and hide all but the first one. In the changed event, you can then show one of the previously hidden element.

     

    Here's a quick sample to get you going (save as json and import in the WF designer):

    {"_properties":{},"components":[{"id":1,"steps":[{"id":2,"inputs":{},"position":"10,0","purpose":"start","title":"Start","transitions":[{"id":82,"position":"100,60 100,110","target":{"id":70}}]},{"action":"gcx:wf:forms:form:DisplayForm","id":5,"inputs":{"form":{"accessors":[],"code":"resources.forms[values.id]","values":{"id":6}}},"name":"form1","position":"-20,290","title":"Display Form"},{"action":"gcx:wf:core::Subworkflow","description":"Dropdown changed event handler","id":37,"inputs":{"subworkflow":{"accessors":["$$subworkflow"],"annotations":[{"count":13,"index":0,"kind":"idref"}],"code":"$$subworkflow","source":"$$subworkflow"}},"name":"subworkflow1","position":"300,80","title":"Subworkflow"},{"action":"gcx:wf:core::Container","id":70,"inputs":{},"position":"-20,110","title":"Container","transitions":[{"id":83,"position":"100,200 100,290","sourceConnector":"bottom","target":{"id":5}}]}]},{"id":8,"steps":[{"id":9,"inputs":{},"position":"0,0","purpose":"start","title":"Event","transitions":[{"id":66,"position":"90,60 90,200","target":{"id":65}}]},{"action":"gcx:wf:core::Annotation","description":"If you still want other form elements to be able to depend on this Drop Down List, you must also execute the *Propagate Form Event* activity here. Otherwise its dependents will not populate in response to this change event.","id":11,"inputs":{},"position":"-320,0","title":"Tip"},{"action":"gcx:wf:core:subworkflow:RunSubworkflow","id":65,"inputs":{"subworkflowId":{"accessors":["activities"],"annotations":[{"count":10,"index":0,"kind":"idref"}],"code":"activities.subworkflow1","source":"activities.subworkflow1"}},"name":"runSubworkflow1","position":"-30,200","title":"Run Subworkflow"}],"title":"change-dropDownList1"},{"id":38,"steps":[{"id":39,"inputs":{},"position":"140,-120","purpose":"start","title":"Subworkflow","transitions":[{"id":64,"position":"230,-60 230,-10","sourceConnector":"bottom","target":{"id":45},"targetConnector":"top"}]},{"action":"gcx:wf:forms::AddFormElement","id":43,"inputs":{"element":{"accessors":["$form1","$formEventData1"],"annotations":[{"count":6,"index":0,"kind":"idref"},{"count":15,"index":13,"kind":"idref"}],"code":"$form1.state[$formEventData1.elementId]","source":"$form1.state[$formEventData1.elementId]"},"elementName":{"accessors":["$elementId"],"annotations":[{"count":10,"index":0,"kind":"idref"}],"code":"$elementId.result","source":"$elementId.result"},"elementType":{"accessors":["$form1","$formEventData1"],"annotations":[{"count":6,"index":0,"kind":"idref"},{"count":15,"index":13,"kind":"idref"}],"code":"$form1.state[$formEventData1.elementId].type","source":"$form1.state[$formEventData1.elementId].type"},"form":{"accessors":["$$form"],"annotations":[{"count":6,"index":0,"kind":"idref"}],"code":"$$form","source":"$$form"}},"position":"110,230","title":"Add Form Element","transitions":[{"id":57,"inputs":{},"position":"230,260 230,310","target":{"id":49}}]},{"action":"gcx:wf:forms::GetFormEventData","id":45,"inputs":{"form":{"accessors":["$$form"],"annotations":[{"count":6,"index":0,"kind":"idref"}],"code":"$$form","source":"$$form"}},"name":"formEventData1","position":"110,-10","title":"Get Form Event Data","transitions":[{"id":68,"inputs":{},"position":"230,60 230,100","target":{"id":67}}]},{"action":"gcx:wf:core::SetProperty","description":"Increase index","id":47,"inputs":{"object":{"accessors":["$index"],"annotations":[{"count":6,"index":0,"kind":"idref"}],"code":"$index","source":"$index"},"propertyName":"result","propertyValue":{"accessors":["$index"],"annotations":[{"count":6,"index":0,"kind":"idref"}],"code":"$index.result + 1","source":"$index.result + 1"}},"position":"110,540","title":"Set Property","transitions":[{"id":59,"inputs":{},"position":"230,610 230,650","target":{"id":51}}]},{"action":"gcx:wf:forms::SetFormElementProperty","description":"rowNumber","id":49,"inputs":{"elementName":{"accessors":["$elementId"],"annotations":[{"count":10,"index":0,"kind":"idref"}],"code":"$elementId.result","source":"$elementId.result"},"form":{"accessors":["$$form"],"annotations":[{"count":6,"index":0,"kind":"idref"}],"code":"$$form","source":"$$form"},"propertyName":"rowNumber","propertyValue":{"accessors":["$rowNumber"],"annotations":[{"count":10,"index":0,"kind":"idref"}],"code":"$rowNumber.result + 1","source":"$rowNumber.result + 1"}},"position":"110,310","title":"Set Form Element Property","transitions":[{"id":61,"inputs":{},"position":"230,380 230,420","target":{"id":53}}]},{"action":"gcx:wf:core::SetProperty","description":"Increase rowNumber","id":51,"inputs":{"object":{"accessors":["$rowNumber"],"annotations":[{"count":10,"index":0,"kind":"idref"}],"code":"$rowNumber","source":"$rowNumber"},"propertyName":"result","propertyValue":{"accessors":["$rowNumber"],"annotations":[{"count":10,"index":0,"kind":"idref"}],"code":"$rowNumber.result + 1","source":"$rowNumber.result + 1"}},"position":"110,650","title":"Set Property"},{"action":"gcx:wf:forms::SetFormElementEvent","description":"changed","id":53,"inputs":{"elementName":{"accessors":["$elementId"],"annotations":[{"count":10,"index":0,"kind":"idref"}],"code":"$elementId.result","source":"$elementId.result"},"eventName":"changed","form":{"accessors":["$$form"],"annotations":[{"count":6,"index":0,"kind":"idref"}],"code":"$$form","source":"$$form"},"targetActivityId":{"accessors":["activities"],"annotations":[{"count":10,"index":0,"kind":"idref"}],"code":"activities.subworkflow1","source":"activities.subworkflow1"}},"position":"110,420","title":"Set Form Element Event","transitions":[{"id":63,"inputs":{},"position":"230,490 230,540","target":{"id":47}}]},{"action":"gcx:wf:core::Cast","id":67,"inputs":{"input":{"accessors":["$index"],"annotations":[{"count":6,"index":12,"kind":"idref"}],"code":"\"dropdown\" + $index.result","source":"\"dropdown\" +$index.result"},"type":"string"},"name":"elementId","position":"110,100","title":"Cast","transitions":[{"id":69,"position":"230,170 230,230","target":{"id":43}}]}]},{"id":71,"steps":[{"id":72,"inputs":{},"position":"-40,-170","purpose":"start","title":"Container","transitions":[{"id":81,"position":"50,-110 50,-40","sourceConnector":"bottom","target":{"id":76}}]},{"action":"gcx:wf:core::Cast","id":76,"inputs":{"input":{"accessors":[],"code":"1","source":"1"},"type":"number"},"name":"rowNumber","position":"-70,-40","title":"Cast","transitions":[{"id":80,"inputs":{},"position":"50,30 50,90","target":{"id":78}}]},{"action":"gcx:wf:core::Cast","id":78,"inputs":{"input":{"accessors":[],"code":"0","source":"0"},"type":"number"},"name":"index","position":"-70,90","title":"Cast"}]}],"deploymentConfig":{"supportedApps":{"VSW":true}},"designerVersion":"5.36.0+40","forms":[{"defaults":{},"elements":{"dropDownList1":{"enabled":true,"index":0,"items":{"0":{"index":0,"label":{"markdown":"Option1"}},"1":{"index":1,"label":{"markdown":"Option2"}},"2":{"index":2,"label":{"markdown":"Option3"}}},"rowIndex":0,"rowNumber":0,"title":{"markdown":"Drop Down List"},"type":"DropDownList"},"footer":{"enabled":true,"items":{"0":{"default":true,"index":0,"label":{"markdown":"Submit"},"validates":true,"value":"submit"},"1":{"index":1,"label":{"markdown":"Cancel"},"validates":false,"value":"cancel"}},"section":"footer","type":"ButtonBar"},"header":{"section":"header","title":{"markdown":"Form Title"},"type":"Header"}},"id":6}],"licenseInfo":{"licenseUrl":"https://nlamsas132.sweco.se/vertigisstudio/workflow/service/auth/license"},"start":{"id":2},"transitions":[{"branch":"changed$dropDownList1","id":10,"source":{"id":5},"target":{"id":9}},{"branch":"content","id":40,"source":{"id":37},"target":{"id":39}},{"branch":"content","id":73,"source":{"id":70},"target":{"id":72}}]}
    2
  • Anna Jose

    Thanks very much Berend, this works well!

    0
  • Zack Robison

    You can also use out-of-box Item Pickers with the multi-select option configured.  When they get too long I set a max-height property on them with CSS.  I've also hooked such item pickers up to filtering radio buttons, textboxes, and autocompletes to help users with long lists.  I find it easier to work with one element that has many values than coalescing multiple elements' values myself, but that's just me.

    0

Du måste logga in om du vill lämna en kommentar.

Hittade du inte vad du sökte?

Nytt inlägg