Help with global customization

Development
1

Describe Your Question

  • I am trying to use the customization service for different things, but the main thing I want to do is add some custom providers / init components based on which extensions are installed. When I try to grab my custom customizations, I get undefined.
  • I am using OHIF v3.7

What steps can we follow to reproduce the bug?

  1. I created an extension (lets call it providers)
  2. I created a getCustomizationModule.ts file (code below) and added it in the index.tsx file
  3. I modified App.tsx to add my custom providers (code below) and print them (I get undefined)

getCustomizationModule.ts

import React from "react";

export default function getCustomizationModule({
	servicesManager,
}) {
	return [
		{
			name: "providers",
			value: {
				id: "customProviders",
				providers: [
					[Provider1, { servicesManager }],
					[Provider2, { servicesManager }],
				],
			},
		},
	];
}

App.tsx

[...]
  const {
    uiDialogService,
    uiModalService,
    uiNotificationService,
    uiViewportDialogService,
    viewportGridService,
    cineService,
    userAuthenticationService,
    customizationService,
  } = servicesManager.services;

  // MOVED FROM BELOW
  // Should there be a generic call to init on the extension manager ?
  customizationService.init(extensionManager);
  // END

  const providers = [
    [AppConfigProvider, { value: appConfigState }],
    [UserAuthenticationProvider, { service: userAuthenticationService }],
    [I18nextProvider, { i18n }],
    [ThemeWrapper],
    [ViewportGridProvider, { service: viewportGridService }],
    [ViewportDialogProvider, { service: uiViewportDialogService }],
    [CineProvider, { service: cineService }],
    [SnackbarProvider, { service: uiNotificationService }],
    [DialogProvider, { service: uiDialogService }],
    [ModalProvider, { service: uiModalService, modal: Modal }],
  ];
  // START ADDED -------------
  const customProviders = customizationService.getGlobalCustomization('customProviders');
  // for (const cProvider of customProviders) {
  //     providers.push(cProvider);
  // }
  console.log("PROVIDERS", customProviders);
  // END ADDED --------------
[...]

FWIW, the global customizations are fetched from a map in the customizationService. Is the way to go to call setGlobalCustomization in my extension or something else ? The doc isn’t really clear about it

Thanks in advance
LB

2

Hello,

I managed to make it work using the setGlobalCustomization methiod from the customizationService. I am wondering though if this is the correct way to do things (It doesn’t look like it to me, because that would mean that the customization module is quite useless).

I also have another question : Is it possible to aggregate custom providers from different extensions “natively” or should I use an array and push into it ?

Thanks in advance
LB

3

Alright, after more digging in the code, I found an answer to one of my questions ! Instead of using setGlobalCustomization, I can use { name: "default", value: [...] } in the getCustomizationModule return. I think this could be improved in the doc and I am willing to help on this !

As for my second question, I am still confused as of how to do things. I guess multiple extensions can set the customRoutes customization, but wouldn’t that mean that only the last registered extension would have its custom routes configured ?

Cheers
LB