Customizing the Icon Link Widget with User Criteria to Control Visibility

[vishnuvardhanch]

In this article, I will walk you through how the out-of-the-box (OOB) Icon Link widget can be enhanced to dynamically show icons only when specific user criteria are met. This customization gives administrators more control over visibility, improving both usability and security.

Step 1: Clone the Widget

Clone the original OOB "Icon Link" widget (sys_id : 3caa67afcb13020000f8d856634c9c2e).

Step 2: Add a "required_user_criterias" Option

Add a new field to the widget’s Options Schema.

Original Schema:

[{
  "name": "link_template",
  "section": "Presentation",
  "label": "Template",
  "type": "choice",
  "choices": [
    {"label":"Top Icon","value":"Top Icon"},
    {"label":"Circle Icon","value":"Circle Icon"},
    {"label":"Color Box","value":"Color Box"}
  ]
}]

Updated Schema:

[{
  "name": "link_template",
  "section": "Presentation",
  "label": "Template",
  "type": "choice",
  "choices": [
    {"label":"Top Icon","value":"Top Icon"},
    {"label":"Circle Icon","value":"Circle Icon"},
    {"label":"Color Box","value":"Color Box"}
  ]
},
{
  "name": "required_user_criterias",
  "section": "Other",
  "label": "Required User Criterias",
  "type": "string"
}]

The new required_user_criterias field accepts a comma-separated list of User Criteria IDs, providing flexible configuration.

Step 3: Enhance the Server Script for Conditional Display

Update the server-side logic to evaluate the user criteria:

(function() {
    data.showIcon = true; // default visibility
    var gr = $sp.getInstanceRecord();
    data.href = $sp.getMenuHREF(gr);
    data.target = options.target || "";
    if (options.required_user_criterias) {
        var criteriaList = options.required_user_criterias.split(",");
        if (criteriaList.length > 0) {
            var matches = sn_uc.UserCriteriaLoader.userMatches(gs.getUserID(), criteriaList);
            data.showIcon = matches;
        }
    }
})();

• If no criteria are specified, the icon displays as usual.
• If criteria are specified, the icon displays only when the user meets at least one of them.

Step 4: Update the HTML Template

Update the widget’s HTML template to reflect the new conditional logic. Add an ng-if directive so the widget renders only when data.showIcon is true:

<div class="iconlink" ng-class="{'high-contrast': accessibilityModeEnabled}" ng-if="data.showIcon">
  <!-- existing link templates -->
</div>

This prevents icons from being visible to users who do not meet the criteria.

Step 5: CSS and Client Controller

No changes are required in the CSS or Client controller.

Outcome

• Icon display becomes conditional based on user criteria.
  
  
• Administrators gain configuration control via widget options.
  
  
• The interface becomes cleaner and more secure, with icons hidden for unauthorized users.

Additional Configuration Options

The widget can be extended further to support role-based visibility controls.

Role-Based Visibility Controls

Add “Required Roles” and “Restricted Roles” options in the schema.

This allows the widget to be: - Shown only if the user has all required roles.
- Hidden if the user has any restricted roles, even if other conditions are met.

Server Script Update

Update the server script to evaluate both lists:

1. Check if the user possesses every role listed under Required Roles.
2. Check if the user does not have any of the roles listed under Restricted Roles.

This approach provides administrators with greater flexibility by combining role-based access control with existing user criteria logic.