Part Visibility Examples

This chapter explains how to configure visibility using JavaScript, and provides a wide range of practical examples.

Visibility rules allow you to dynamically show or hide parts based on conditions. All visibility logic is configured in the Advanced tab of a part.

Visibility rules follow these principles:

• If the condition returns true, the part is visible

• If the condition returns false, the part is hidden

Where to Configure Visibility

To configure visibility rules for a part:

1. Open the part you want to modify.

2. Go to the Advanced tab.

3. Find the setting Set visibility via and choose JavaScript. Visibility rules described in this manual require the JavaScript option.

4. In the Visibility text box, you will write your JavaScript condition.

5. To insert part references, use the selector located below the Visibility box:

   • First dropdown: (filter dropdown below) – allows you to filter the list.

   • Second dropdown: choose the part to reference.

   • Click Add.

6. This inserts a placeholder such as:

   #REPLACE-PARTVALUE-<InternalName>||Value#

Important: The list of available parts can be long. Parts are grouped by tab

The result will look like this in the UI:

• Set visibility via: JavaScript

• Visibility: contains your expression

• Below the field, you will find informational notes explaining how Plain text, NCalc, and JavaScript visibility behave.

---

Basic Visibility Examples

Value equals X

return #REPLACE-PARTVALUE-<internal_label>||Value# === 'X';

Example

return #REPLACE-PARTVALUE-Request_Type||Value# === '4';

---

Value is not equal to X

return #REPLACE-PARTVALUE-<internal_label>||Value# !== 'X';

Example

return #REPLACE-PARTVALUE-Request_Type||Value# !== '9';

---

Multiple Allowed Values (X, Y, Z)

var val = #REPLACE-PARTVALUE-<internal_label>||Value#;

if (val == X || val == Y || val == Z) return true;
else return false;

Example

var requestType = #REPLACE-PARTVALUE-Request_Type||Value#;
if (requestType == 1 || requestType == 2 || requestType == 4) return true;
else return false;

---

Yes/No Fields

Value is TRUE (Yes)

return #REPLACE-PARTVALUE-<internal_label>||# === "true";

Value is FALSE (No)

return #REPLACE-PARTVALUE-<internal_label>||# === "false";

---

Combining AND and OR

Source logic example:

(Request_Type = '4' OR Request_Type = '2') AND Internal_YesNo = '1'

JavaScript version:

var type = #REPLACE-PARTVALUE-Request_Type||Value#;
var internalFlag = #REPLACE-PARTVALUE-Internal_YesNo||#;

if ((type == 2 || type == 4) && (internalFlag == true)) return true;
else return false;

---

Multiple AND Conditions

Source logic:

Type = 4 AND Chemical_Substance = Yes AND Internal = Yes

JavaScript:

var type = #REPLACE-PARTVALUE-Request_Type||Value#;
var chem = #REPLACE-PARTVALUE-Chemical_Substance||#;
var internal = #REPLACE-PARTVALUE-Internal_YesNo||#;

if (type == 4 && chem == true && internal == true) return true;
else return false;

---

Example with two Yes/No fields

var ceScope = #REPLACE-PARTVALUE-CE_Marking_Scope_YN||#;
var otherIndication = #REPLACE-PARTVALUE-Other_Indication_YN||#;

if (ceScope == "true" && otherIndication == "true") return true;
else return false;

---

Show the part when any value is selected in another part

return (#REPLACE-PARTVALUE-<internal_label>||#);

---

Multiselect Visibility Rules

Important:

For multiselect fields, the recommended approach is:

• Set visibility via: Plain text

• Insert only the part reference:

  #REPLACE-PARTVALUE-<internal_label>||#

This is usually enough.

---

Multiselect contains X

return #REPLACE-PARTVALUE-<internal_label>||#.indexOf('X') >= 0;

---

Multiselect contains X or Y

Example: show the field if the multiselect contains Conferences OR Miscellaneous personnel costs.

var conferences = #REPLACE-PARTVALUE-Multiselect||#.indexOf('Conferences');
var miscCosts = #REPLACE-PARTVALUE-Multiselect||#.indexOf('Miscellaneous personnel costs');

if (conferences >= 0 || miscCosts >= 0) return true;
else return false;

---

Numeric Comparisons

Value greater than X

return #REPLACE-PARTVALUE-<internal_label>||# &&
       Number(#REPLACE-PARTVALUE-<internal_label>||#) > X;

Note: the internal label appears twice.

---

OR Between Two Yes/No Fields

Version 1:

var a = #REPLACE-PARTVALUE-<internal_label>||#;
var b = #REPLACE-PARTVALUE-<internal_label2>||#;

if (a == "true" || b == "true") return true;
else return false;

Version 2 (short form):

var a = #REPLACE-PARTVALUE-<internal_label>||#;
var b = #REPLACE-PARTVALUE-<internal_label2>||#;
return (a == "true" || b == "true");

Example

var writtenConsent = #REPLACE-PARTVALUE-Written_Consent_YN||#;
var verbalConsent = #REPLACE-PARTVALUE-Verbal_Consent_YN||#;
return (writtenConsent == "false" || verbalConsent == "false");

---

Show a field if any of two numeric fields is greater than 0

Example fields:

• Participants_0_to_12

• Participants_12_to_18

var p0 = Number(#REPLACE-PARTVALUE-Participants_0_to_12||#);
var p12 = Number(#REPLACE-PARTVALUE-Participants_12_to_18||#);

return p0 > 0 || p12 > 0;

Note: JavaScript variable names cannot start with a number.

---

Clearing values of hidden fields

If a part becomes hidden, its value normally remains stored. To ensure hidden values are cleared, return an empty string via the Default value (JavaScript).

Yes/No field

var temp = #REPLACE-PARTVALUE-YesNoField||#;
return "";

Text field

var temp = #REPLACE-PARTVALUE-TextTrigger||#;
return "";

Triggers work recursively, ensuring dependent fields are also cleared.

---

Visibility Based on Phase

Show part only when the service phase equals “PhaseX”

return #REPLACE-SERVICE-PHASE||Name# === 'PhaseX';

---

Show part from PhaseX onward (using phase order)

var currentPhaseOrder = JSON.parse(
    CommonInterface.callWebservice('Get Phase Order By Name', {
        'Name': #REPLACE-SERVICE-PHASE||Name#
    })
);

var targetPhaseOrder = JSON.parse(
    CommonInterface.callWebservice('Get Phase Order By Name', {
        'Name': 'PhaseX'
    })
);

return currentPhaseOrder.length > 0 &&
       targetPhaseOrder.length > 0 &&
       +currentPhaseOrder[0].ItemOrder >= +targetPhaseOrder[0].ItemOrder;

---

Summary

This chapter explains how to configure visibility with:

• equality and inequality checks

• multiple allowed values

• Yes/No logic

• AND/OR combinations

• multiselect content checks

• numeric comparisons

• clearing values of hidden fields

• visibility based on workflow phase or phase order

All examples are ready for copy/paste into the Visibility field of the part.