Help with global customization

Support 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

4

what do you mean by different providers? like metadata provider? you should add them to cornerstone, take a look at init

5

Hi !
The providers I am thinking about are fetching data from a server to make them available to some services. For example, we authenticate users via cookies (not using oidc) and I want the user to be specified in the userAuthenticationService. So I have a provider that fetches the user’s data and sets the user in the service before any rendering is done.
However, this discussion can now be closed, since 3.8 introduced the ServiceProvidersManager, which has a very similar purpose.

Thanks,
LB

6

We are adding some auth guides via keycloak very soon

1 Like