Below is the sample piece of code from workflow ContractorOnboarding.xml
<flowable:formProperty id=“userName” name=“Username” type=“string” required=“true”></flowable:formProperty>
<flowable:formProperty id=“givenName” name=“First Name” type=“string” required=“true”></flowable:formProperty>
<flowable:formProperty id=“sn” name=“Last Name” type=“string” required=“true”></flowable:formProperty>
<flowable:formProperty id=“department” name=“Department” type=“string”></flowable:formProperty>
<flowable:formProperty id=“jobTitle” name=“Job Title” type=“string”></flowable:formProperty>
<flowable:formProperty id=“telephoneNumber” name=“Phone Number” type=“string” required=“true”></flowable:formProperty>
<flowable:formProperty id=“mail” name=“Email” type=“string” required=“true”></flowable:formProperty>
<flowable:formProperty id=“startDate” name=“Start Date” type=“string” required=“true”></flowable:formProperty>
<flowable:formProperty id=“endDate” name=“End Date” type=“string”></flowable:formProperty>
<flowable:formProperty id=“description” name=“Description” type=“string” required=“true”></flowable:formProperty>
<flowable:formProperty id=“provisionToCSV” name=“Create in CSVFile” type=“boolean”></flowable:formProperty>
I want to add drop down field here. Can you please tell me how to do that?
Regards
Manish Kumar
Hi Manish,
Welcome to the community.
I think the information you’re looking for is available from the Vue.js Documentation on forms and the Vue Bootstrap Documentation.
Within the contractorOnboarding sample, the contractorForm.js file contains the template that is used to generate the form the end-user sees within the IDM End User UI.
As an example, if you wanted to use traditional checkbox behaviour for a Boolean rather than the switch, you can change:
+ " <template v-else-if=\"formProperty.type.name === 'boolean'\">"
+ " <b-form-checkbox"
+ " switch"
+ " size=\"lg\""
+ " class=\"mt-1 fr-toggle-primary\""
+ " v-model=\"formData[formProperty._id]\" />"
+ " </template>"
To:
+ " <template v-else-if=\"formProperty.type.name === 'boolean'\">"
+ " <b-form-checkbox"
+ " size=\"lg\""
+ " class=\"mt-1 fr-toggle-primary\""
+ " v-model=\"formData[formProperty._id]\" />"
+ " </template>"
And you can show radio buttons using something like:
+ " <template v-else-if=\"formProperty.type.name === 'boolean'\">"
+ " <b-form-radio"
+ " size=\"lg\""
+ " v-model=\"formData[formProperty._id]\" />"
+ " </template>"
Although I expect that this won’t be intended for a boolean property value in your environment, the documentation provides relevant examples and instructions that can assist with implementing your dropdown.
I hope you find this helpful.
Thank you,
Sheila
Hi Manish,
I also struggled with dropdowns for a bit. The way I found to do a dropdown is to specify the value (formProperty._id) you are building the dropdown for in the template section of the form, and then provide the values for that formProperty. Example below for the formProperty ‘department’. The ‘value’ is the backend value referenced in your systems. The department names between the ‘> <’ is what is displayed in the dropdown.
+ " <template v-for=\"formProperty in processDefinition.formProperties\" :key=\"formProperty._id\">"
+ " <b-form-group label-cols-lg=\"2\" v-if=\"formProperty._id === 'department'\">"
+ " <template>"
+ " <template slot=\"label\">{{formProperty.name}}</template>"
+ " <b-form-select v-model=\"formData[formProperty._id]\" label-for=\"formProperty._id\" :name=\"formProperty._id\">"
+ " <b-form-select-option disabled value=\"null\">-- Please select a Department --</b-form-select-option>"
+ " <b-form-select-option value=\"marketing\">Marketing</b-form-select-option>"
+ " <b-form-select-option value=\"finance\">Finance</b-form-select-option>"
+ " <b-form-select-option value=\"it\">IT</b-form-select-option>"
+ " <b-form-select-option value=\"human_resources\">Human Resources</b-form-select-option>"
+ " </b-form-select>"
+ " </template>"
+ " </b-form-group>"
+ " </template>