UI Kit 1 MacroConfig to UI Kit migration - Multiple Macros - Multiple Configs

Forge Forge UI Kit and Custom UI
1

Hi,

I am trying to migrate my UI Kit 1 Macro Config for my app that has three macros to the new UI Kit approach.
See:

But how can I use different Configs for my macros? Currently they all run the same bundled Custom UI frontend. And currently in the UI Kit 1 world I define the config in the manifest.yml like so:

modules:
  macro:
    - key: macroone
      icon: resource:icons;app-logo.svg
      resource: customui
      resolver:
        function: resolver
      title: macroone
      description: macroone
      config:
        function: macroOneConfig
      export:
        function: macroOneExport
    - key: macrotwo
      icon: resource:icons;app-logo.svg
      resource: customui
      resolver:
        function: resolver
      title: macrotwo
      description: macrotwo
      config:
        function: macrotwoConfig
      export:
        function: macrotwoExport

And I can do in single config.js backend file something like this:

...

export const renderMacroConfigOne = render(<MacroOneConfig />);

export const renderMacroConfigTwo = render(<MacroTwoConfig />);

And now with UI Kit I have to use:

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

ForgeReconciler.addConfig(<Config />);

And how do I apply different configs here? Is it possible to use conditionals here?

How can I achieve the same thing with UI Kit?

thanks,

Bernhard

Who decided to merge the config together with the frontend? Why not keep it separate like the Word ADF export still is? …

2

I’m not sure what your Config code looks like (if there’s overlap), but it’s definitely possible to use conditionals. You can use the view.getContext method and implement different logic based on the resulting moduleKey (which matches what you find in your manifest).

There might be a better way in general, but that should work.

2 Likes