Designer update ribbon panel

Designer update ribbon panel

Posted by: anton.kagakin on 7 April 2025, 6:45 am EST

• 

  anton.kagakin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 7 April 2025, 6:45 am EST - Updated 8 April 2025, 5:36 am EST

  Hi!

  Do I have a way to update ribbon without reset all config for designer?

  I have SPA, and to different routes, depending on which there should be different tabs in designer ribbon.

  For example for /user route we should see the user tab added to ribbon, and for /admin route we should see admin tab added to ribbon.

  So it’s like for /user it is defaultConfig.ribbon + userTab, and for /admin it is defaultConfig.ribbon + adminTab.

  Now i do it through designer.setConfig(newConfig), but it affects to many things including rerendering File Menu (with my custom components, which asynchronously loads data, so they always run request to server on each ribbon update)

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 8 April 2025, 7:13 am EST - Updated 8 April 2025, 7:18 am EST

  Hi,

  There is no public API available that will only update the ribbon of the SpreadJS Designer. The designer config is updated as a whole using the setConfig method, which contains the fileMenu, commandMap, ribbon, sidePanels, and contextMenu.

  However, it is possible to show the user and admin tabs based on the route by displaying only a single tab based on the visibleWhen condition of the tab. Please refer to the code snippet below that illustrates the same:

  const userTab = {
    id: "UserTab",
    text: "User",
    buttonGroups: [
      {
        commandGroup: {
          children: [
            {
              type: "textBlock",
              text: "Welcome User",
            },
          ],
        },
      },
    ],
    visibleWhen: "UserRoute",
  };
  const adminTab = {
    id: "AdminTab",
    text: "Admin",
    buttonGroups: [
      {
        commandGroup: {
          children: [
            {
              type: "textBlock",
              text: "Welcome Admin",
            },
          ],
        },
      },
    ],
    visibleWhen: "AdminRoute",
  };
  config.ribbon.push(userTab);
  config.ribbon.push(adminTab);
  designer.setConfig(config);
  designer.setData("UserRoute", true);
  designer.setData("AdminRoute", false);

  You can further refer to the attached code sample at the bottom that uses the above code snippet and shows the specified tab based on conditions. This approach will not enforce the whole designer configuration to reload.

  Please feel free to reach out if you encounter any further issues.

  Best Regards,

  Ankit

  customFMAndRibbon.zip

  

• 

  anton.kagakin

  • Post Options:
  • Link
    Copy

  Posted 8 April 2025, 10:59 am EST

  Thanks! Looks like this is what I need.