Set UI customization configuration

In general, when you’re configuring user interface (UI) customization, provide the settings in the ui option when you load the SDK:

NutrientViewer.load({
  // ... Your configuration.
  ui: {
    // Initial configuration for UI customization.
  },
});

However, there are cases where you may want to update the UI customization configuration after the SDK has been loaded. You can do this using the setUI method on instance.

Updating the UI configuration

With setUI, you can update any of the slots in your UI customization configuration. This also applies to nested slots.

Consider the following example where you’re customizing the commentThread slot:

NutrientViewer.load({
  // ... Your configuration.
  ui: {
    commentThread: (instance, id) => ({
      render: (params) => {
        // Return a DOM node.
        const div = document.createElement("div");
        div.style.backgroundColor = "lightblue";
        div.style.padding = "10px";
        div.style.border = "1px solid #ccc";
        div.style.borderRadius = "5px";
        div.innerText = `This is a custom UI for the comment thread: ${id}`;


        return div;
      },
    }),
  },
});

Later, if you want to update the commentThread slot to change its content, you can do so with instance.setUI:

instance.setUI({
  commentThread: (instance, id) => ({
    render: (params) => {
      // Return a DOM node.
      const div = document.createElement("div");
      div.style.backgroundColor = "lightblue";
      div.style.padding = "10px";
      div.style.border = "1px solid #ccc";
      div.style.borderRadius = "5px";
      div.innerText = `Updated content for comment thread.`;


      return div;
    },
  }),
});

Updating nested slots

Similar to the example above where you updated the commentThread slot, you can also update nested slots.

An important thing to note is that you need to provide the full configuration object to setUI. The provided object replaces the entire configuration passed in the ui option during SDK load.

Consider the following example where you’re customizing the header slot within the commentThread slot:

NutrientViewer.load({
  // ... Your configuration.
  ui: {
    commentThread: {
      header: () => {
        return {
          render: () => {
            const div = document.createElement("div");
            div.style.backgroundColor = "lightgreen";
            div.style.padding = "5px";
            div.innerText = "This is a custom header for the comment thread.";


            return div;
          },
        };
      },
    },
  },
});

Later, if you want to remove the header customization and add footer customization at the same time, you can do so with instance.setUI:

instance.setUI({
  commentThread: {
    footer: () => {
      return {
        render: () => {
          const div = document.createElement("div");
          div.style.backgroundColor = "lightcoral";
          div.style.padding = "5px";
          div.innerText = "This is a custom footer for the comment thread.";


          return div;
        },
      };
    },
  },
});

Partially updating the UI configuration

The configuration object you pass to setUI completely replaces the previous configuration. At times, you might want to update only specific slots while retaining the rest of the configuration (and leaving the state of the rest of the UI intact).

You can do this by storing your UI configuration in a variable before passing it to the ui property in load. Later, when passing an updated configuration to setUI, you can generate a new object by merging your previous UI configuration with the new changes. This keeps references to unchanged slots intact, and the SDK won’t update them.

It’s recommended that you pass a new object to setUI instead of mutating the previous configuration object, so the SDK can reliably detect changes in your UI configuration.

Consider an example where you’ve customized the header and footer slots within the commentThread slot:

// Instead of directly passing the object to the `ui` property, store it in a variable first.
const uiConfig = {
  commentThread: {
    header: () => {
      return {
        render: () => {
          const div = document.createElement("div");
          div.style.backgroundColor = "lightgreen";
          div.style.padding = "5px";
          div.innerText = "This is a custom header for the comment thread.";


          return div;
        },
      };
    },
    footer: () => {
      return {
        render: () => {
          const div = document.createElement("div");
          div.style.backgroundColor = "lightcoral";
          div.style.padding = "5px";
          div.innerText = "This is a custom footer for the comment thread.";


          return div;
        },
      };
    },
  },
};


NutrientViewer.load({
  // ... Your configuration.
  ui: uiConfig,
});

Later, if you want to update the footer slot within commentThread but keep the header slot intact, you can do so by merging your previous configuration with the new changes:

instance.setUI({
  // Spread the previous configuration to keep unchanged slots intact.
  ...uiConfig,
  commentThread: {
    // Spread the previous `commentThread` configuration to keep unchanged slots, such as header, intact.
    ...uiConfig.commentThread,
    footer: () => {
      return {
        render: () => {
          const div = document.createElement("div");
          div.style.backgroundColor = "lightcoral";
          div.style.padding = "5px";
          div.innerText = "Updated content for the custom footer.";


          return div;
        },
      };
    },
  },
});