Clear Extensions (clearExtensions)

The JSON schema includes a powerful feature called “clearExtensions” that allows you to dynamically remove UI extensions from your application’s screen. This feature provides flexibility in managing and customizing the user interface based on user interactions or specific conditions.

When working with UI extensions, such as buttons, links, or additional components, you may need to control their visibility or remove them entirely from the screen based on certain events or actions. The “clearExtensions” property allows you to achieve this seamlessly, giving you the ability to create a dynamic and tailored user experience.

Understanding clearExtensions

The “clearExtensions” property works by targeting the component ID associated with the extension you want to remove.

When the action containing “clearExtensions” is triggered, it instructs the application to remove the specified extension(s) from the screen, instantly updating the user interface. This provides a seamless way to modify the UI based on user interactions or specific conditions without requiring a page reload or manual intervention.

To demonstrate the usage of “clearExtensions,” we’ll walk through the provided JSON schema, which includes two general buttons, a link, and a clear extensions button that will preform the action. We’ll focus on how the clear extensions impacts the components.

{
  "version": "1.0",
  "pages": [
    "sales/amend-customer"
  ],
  "uiExtensions": [
    {
      "id": "button1",
      "component": {
        "Button": {
          "id": "aButton1",
          "mt": 2,
          "children": [
            "button 1"
          ]
        }
      }
    },
    {
      "id": "button2",
      "component": {
        "Button": {
          "id": "aButton2",
          "mt": 2,
          "ml": 2,
          "children": [
            "Button 2"
          ]
        }
      }
    },
    {
      "id": "links",
      "component": {
        "Link": {
          "href": "https://carbon.sage.com/",
          "children": [
            "Sage Carbon Website"
          ]
        }
      }
    },
    {
      "id": "clearButton",
      "component": {
        "Button": {
          "id": "aButton3",
          "mt": 2,
          "onClick": {
            "action": "testOnClick"
          },
          "children": [
            "Clear Extensions"
          ]
        }
      }
    }
  ],
  "actions": {
    "testOnClick": [
      {
        "set": {
          "clearExtensions": {
            "componentId": "exchange_rate_type"
          }
        }
      },
      {
        "set": {
          "clearExtensions": {
            "componentId": "UsefulLinks"
          }
        }
      }
    ]
  },
  "validations": [],
  "events": [
    {
      "onLoad": [
        {
          "set": {
            "pageExtension": {
              "componentId": "exchange_rate_type",
              "panel": "bottom",
              "uiExtension": "button1"
            }
          }
        },
        {
          "set": {
            "pageExtension": {
              "componentId": "exchange_rate_type",
              "panel": "bottom",
              "uiExtension": "button2"
            }
          }
        },
        {
          "set": {
            "componentExtension": {
              "componentId": "UsefulLinks",
              "uiExtension": "links"
            }
          }
        },
        {
          "set": {
            "pageExtension": {
              "componentId": "name",
              "panel": "bottom",
              "uiExtension": "clearButton"
            }
          }
        }
      ]
    }
  ]
}
```

Beginning with the uiExtensions, we create two buttons button1 and button2, next we create a additional link in the helpful links section at the bottom of the screen. The last uiExtensions component is the clear extension button and this using the onClick event will trigger that action thats will utilise clearExtensons.

          "onClick": {
            "action": "clearOnClick"
          },

Jumping past the actions section to look at the events, we are using the onLoad event to populate the three buttons and link on the screen. The two buttons have been associated with “exchange_rate_type” (this is important to note for later), the link has been added to “UsefulLinks” and the clear button associated with “name” (this could be placed anywhere).

Now lets look at the actions, when the user presses our clear extension button it is going to call the action “testOnClick”. The “testOnClick” action includes two “set” commands using the “clearExtensions” property:

• The first command targets the “exchange_rate_type” component using the “componentId” property. This removes the associated buttons (“button1” and “button2”) from the screen. Its important to note that we needed to target “exchange_rate_type” as this is the component our buttons are assiocatyed against and we are clearing extentions so it needs to know where we are clearing them from.

• The second command targets the “UsefulLinks” component, removing the “links” extension from the screen. Noticed it only removes our additional component and leaves the default link.

  "actions": {
    "testOnClick": [
      {
        "set": {
          "clearExtensions": {
            "componentId": "exchange_rate_type"
          }
        }
      },
      {
        "set": {
          "clearExtensions": {
            "componentId": "UsefulLinks"
          }
        }
      }
    ]
  },

Understanding and utilising the “clearExtensions” property in the JSON schema empowers you to create dynamic and interactive user interfaces. By strategically removing UI extensions based on user interactions or specific conditions, you can deliver a tailored and seamless user experience. The ability to control the visibility and removal of UI extensions enhances the flexibility and customization options of your application, providing a responsive interface that meets the unique needs of your users.