How do I use the Visibility Area?

In this builder area, one can adjust the visibility and editability of items at each step of the workflow. The main differentiating factor of the Droplet vs a standard digital form is workflow enablement. A lot of that power is derived by showing different assignees different materials and allowing different assignees to update different fields.

Available Visibility Permissions

Three different states can be assigned to components at each workflow step using the component ID:

• readonly - the component is shown but it is not editable at that particular stage in the workflow.
• hidden - the component is not visible to the user at this step.
• editable - the component can be adjusted by the user at this step.

The basic outline of this file will look like the code snippet below. This indicates the permissions for the start step for three components with the IDs of submittedByName, gradeLevel, and building. 

{
  "start": {
    "permissions": {
      "submittedByName": "editable",
      "gradeLevel": "readonly",
      "building": "hidden"
      }
    }
}

Generally, when you build your layout within the Visual Builder, Droplet will add the component ID to the start step and declare it editable. If you would like a component to be editable at any other step or to be a different state at the start step, you'll need to update it here in the visibility layer. You can make a component editable in one or more steps in the workflow. 

Actions, or the buttons available to move the submission through the workflow, can be hidden using the following references:

• _actions - all actions buttons
• _reject - just the reject button
• _submit - just the submit button

If you have multiple workflow steps, you may see them automatically added to the visibility layer or you may need to manually add them. The code snippet below shows step permissions declared at multiple workflow steps. You may notice that no IDs are called out as readonly; this is because any ID that is not declared with default to readonly. 

{
  "start": {
    "permissions": {
      "submittedByName": "editable",
      "submittedByEmail": "editable",
      "building": "editable",
      "execDirectorAssigned": "editable",
      "gradeLevel": "editable",
      "positionHours": "editable",
      "hours": "editable",
      "department": "editable",
      "professionalOrService": "editable",
      "jobDescription": "editable",
      "requestReason": "editable",
      "fundsSource": "editable",
      "accountNumber": "editable",
      "principalSignature": "editable",
      "principalSignatureDate": "editable",

      "directorSignatureArea": "hidden",
      "execDirectorSignatureArea": "hidden",
      "asstSuperApprovalArea": "hidden",
      "deputySuperSignatureArea": "hidden",
      "treasurerSignatureArea": "hidden",
      "superSignatureArea": "hidden",
      "deptDirectorSignatureArea": "hidden",
      "personnelDirectorSignatureArea": "hidden"
    }
  },
  "execDirectorStep": {
    "permissions": {
      "execDirectorSignature": "editable",
      "execDirectorSignatureDate": "editable",
      "needsDepartmentApproval": "editable",
      "operationsOrInstructional": "editable",

      "asstSuperApprovalArea": "hidden",
      "deputySuperSignatureArea": "hidden",
      "treasurerSignatureArea": "hidden",
      "superSignatureArea": "hidden",
      "deptDirectorSignatureArea": "hidden",
      "personnelDirectorSignatureArea": "hidden"
    }
  },
  "deptDirectorStep": {
    "permissions": {
      "deptDirectorSignature": "editable",
      "deptDirectorSignatureDate": "editable",
      "fundsSource": "editable",
      "accountNumber": "editable",

      "asstSuperApprovalArea": "hidden",
      "execDirectorSignatureArea": "hidden",
      "deputySuperSignatureArea": "hidden",
      "treasurerSignatureArea": "hidden",
      "superSignatureArea": "hidden",
      "personnelDirectorSignatureArea": "hidden"
    }
  },
  "asstSuperStep": {
    "permissions": {
      "asstSuperSignature": "editable",
      "asstSuperSignatureDate": "editable",

      "execDirectorSignatureArea": "hidden",
      "deputySuperSignatureArea": "hidden",
      "treasurerSignatureArea": "hidden",
      "superSignatureArea": "hidden",
      "personnelDirectorSignatureArea": "hidden"
    }
  },

  "deputySuperStep": {
    "permissions": {
      "deputySuperSignature": "editable",
      "deputySuperSignatureDate": "editable",

      "treasurerSignatureArea": "hidden",
      "superSignatureArea": "hidden",
      "personnelDirectorSignatureArea": "hidden"
    }
  },
  "treasurerStep": {
    "permissions": {
      "treasurerSignature": "editable",
      "treasurerSignatureDate": "editable",
      "fundsSource": "editable",
      "accountNumber": "editable",

      "superSignatureArea": "hidden",
      "personnelDirectorSignatureArea": "hidden"
    }
  },
  "superStep": {
    "permissions": {
      "superSignature": "editable",
      "superSignatureDate": "editable",

      "personnelDirectorSignatureArea": "hidden"
    }
  },
  "personnelDirectorsStep": {
    "permissions": {
      "personnelDirectorSignature": "editable",
      "personnelDirectorSignatureDate": "editable",
      "applicant": "editable"
    }
  },
  "rejected": {
    "permissions": {
      "_actions": "hidden"
    }
  },
  "completed": {
    "permissions": {
      "_actions": "hidden"
    }
  }
}

Visibility Permissions Warnings and Errors

The default state for components is readonly so if you do not declare permissions for a component ID in a step, that component will be read-only for that step. You will likely see warnings in the side panel of the Visibility layer telling you which components are undeclared in any step. If you want these components to remain read-only for the entire duration of the submission's lifecycle, you can leave them undeclared and ignore the warning.

Some components, such as sections and text components, cannot be made editable and should instead be readonly or hidden. Only components that allow input can be made editable. If you aren't hiding these components at any point, they will show as a warning in the right-side panel along with any other undeclared IDs. If you attempt to make an ID editable that cannot be, you will see an error message in the right side panel and will be unable to save until the ID or permissions are corrected. 

Visibility Permissions Best Practices

Use Descriptive Component IDs

Being able to recognize which ID goes with which component on your form layout will help you work more quickly while setting up Step Permissions. In the code snippet above, you can easily determine which signature field will be completed by the treasurer or personnel director for example. 

If you are having difficulty recognizing which ID goes with which component, it is worth your time to return to the form layout and update the component IDs. You will likely need to replace some step permissions from the start step when you save the changes but it will save you time and headaches as manage this form moving forward. 

Organize Visibility Permissions

We often group step permissions into which IDs are editable, hidden, or readonly or by section of the form. This makes maintenance of the form easier if any changes need to be made to permissions or components in the future.

Here is an example of organizing by permission:

"deputySuperStep": {
    "permissions": {
      "deputySuperSignature": "editable",
      "deputySuperSignatureDate": "editable",

      "treasurerSignatureArea": "hidden",
      "superSignatureArea": "hidden",
      "personnelDirectorSignatureArea": "hidden"
    }
  },

Hide Groups of Components

Another way to save time and make declaring visibility permissions easier over the lifetime of this form is to use section, group, or tile component IDs to hide multiple components at once. 

Sections, groups, and tiles can have IDs just like any other component, and declaring one of these IDs as hidden will hide all components it contains. 

You can see this in action in the code snippet below. In this form layout, the signature and date fields for each workflow approver are in a section with a descriptive ID. This way the section can be hidden using one line of code rather than two. When we need them to be editable, we'll declare the permission for the signature and date instead of the section. 

 "asstSuperStep": {
    "permissions": {
      "asstSuperSignature": "editable",
      "asstSuperSignatureDate": "editable",

      "execDirectorSignatureArea": "hidden",
      "deputySuperSignatureArea": "hidden",
      "treasurerSignatureArea": "hidden",
      "superSignatureArea": "hidden",
      "personnelDirectorSignatureArea": "hidden"
    }
  },