How to hide or show fields in a form

Before you read this guide, we suggest that you read the previous two:

1. How to build Workflow Server from GitHub.
2. How to add a custom field to a form.

Since the forms in Workflow Server are made in VueJs, you can use the v-if attribute to hide/show fields depending on the conditions. Example:

<div wfs-content="fields">
    <el-form-item label="Allow" name="Allow" prop="Allow">
        <el-checkbox v-model="FormData.Allow" :disabled="isreadonly()">
        </el-checkbox>
    </el-form-item>
    <el-form-item v-if="FormData.Allow" label="Hidden input" name="HiddenInput" prop="HiddenInput">
        <el-input v-model="FormData.HiddenInput" :readonly="isreadonly()">
        </el-input>
    </el-form-item>
</div>

You can also use the function to check the condition:

1. Open the WorkflowServer.js file and in the WorkflowServer.VueConfig.methods field create the required function:
2. Rebuild the frontend. See this guide for more information.
3. This function can now be called directly in attributes:

   <div wfs-content="fields">
       <el-form-item label="Role" name="Role" prop="Role">
           <el-select v-model="FormData.Role" :disabled="isreadonly()"></el-select>
       </el-form-item>
       <el-form-item v-if="isAdmin(FormData.Role)" label="Hidden input" name="HiddenInput" prop="HiddenInput">
           <el-input v-model="FormData.HiddenInput" :readonly="isreadonly()">
           </el-input>
       </el-form-item>
   </div>

info

At the moment you cannot use user roles, as they are not transferred to the frontend.