Customizing v8 NavigationBar using Customizer

jansh90 · September 22, 2023, 4:39pm

Hello,

I am trying to migrate my header.jsp script-based modification into Customizer apps.
In this specific case I just want to replace the logo. My working header.jsp customization looks like this

window.connectionsExtension = {
				"com.hcl.connections.custom.style": {
					"style-customization": {
						"top-navigation": {
							"logo": {
								"position": "left",
								"order": "1",
								"src": "https://connections.solvito.de/images/sologo.svg"
							}
						}
					}
				}
}

As far as I understand the JS-based customizations to the header using extension "com.ibm.customizer.ui" as in this example are outdated. I will have to use extensions of type "com.hcl.connections.custom.style" for v8 . So I constructed the following app:

{
    "name": "Connections Custom Config Extension",
    "title": "Connections Custom Config Extension",
    "description": "Connections Custom Config Extension - Description",
    "services": [
        "Customizer"
    ],
    "state": "enabled",
    "extensions": [
        {
            "name": "connections-custom-config-extension",
            "type": "com.hcl.connections.custom.style",
            "payload": {
                "style-customization": {
                    "top-navigation": {
                        "logo": {
                            "position": "left",
                            "order": "1",
                            "src": "https://connections.solvito.de/images/sologo.svg"
                        }
                    }
                },
                "cacheExpiration": 20000
            },
            "path": "global",
            "state": "enabled"
        }
    ]
}

But this does not work. Can somebody provide a working example ?

Thanks in advance.
Kind regards,
Jan

anon-2450 · September 22, 2023, 4:50pm

The custom styling extension is not consumed by Customizer; the services entry needs to be 'Connections' and not 'Customizer'.

treinheimer · September 25, 2023, 7:45am

Yes. I agree with David. A detailed example can be reviewed at page:
connections-ui-docs

jansh90 · October 2, 2023, 10:43am

Hello,

I have tried both variants "connections" & "customizer". Also using the provided example at https://github.com/HCL-TECH-SOFTWARE/connections-ui-docs/tree/master/custom-config-extensions but this also does not work.
On the other hand this app code works:

{
    "name": "Simple Customizer Sample",
    "title": "My First Customizer App",
    "description": "Perform a modification to the Connections Homepage",
    "services": [
        "Customizer"
    ],
    "extensions": [
        {
            "name": "Hello World Extension",
            "type": "com.ibm.customizer.ui",
            "payload": {
                "include-files": [
                    "helloWorld/helloWorld.user.js"
                ]
            },
            "path": "homepage"
        }
    ]
}

What am I doing wrong ? Any other ideas ?

Thanks in advance !
Kind regards,
Jan

urs.meli · October 4, 2023, 2:23pm

Hi

There could be several issues here:
a) general issue with proxy config

b) caching, possible issue if there's a caching proxy

there are some api endpoint that you could call

/appregistry/api/v3/services/Connections/extensions?type=

so for the custom style it would be

/appregistry/api/v3/services/Connections/extensions?type=com.hcl.connections.custom.style

jansh90 · October 5, 2023, 1:27pm

Hey Urs,

I can open "/appregistry/api/v3/services/Connections/extensions?type=com.hcl.connections.custom.style" and it prints the code of my app. But I do not know what this technically means - can you comment ?
Regarding caching: Since the helloWorld app works fine - could there still be a caching issue for the logo-/top-navigation app ?
Regarding proxy config: To avoid any issue I am forwarding all traffic from nginx to kubernetes master as described in the documentation (so not redirecting specific URLs). Can you add some details on what you think could be wrongly configured on my nginx ?

And could you be so kind to quickly check if my app code works in one of your test-environments (if you have one...) ?

Thanks in advance.

Regards,
Jan

urs.meli · October 11, 2023, 9:56am

With this json:

{
    "name": "Connections Custom Config Extension",
    "title": "Connections Custom Config Extension",
    "description": "Connections Custom Config Extension - Description",
    "services": [
        "Connections",
        "Customizer",
        "Customizer"
    ],
    "state": "enabled",
    "extensions": [
        {
            "name": "connections-custom-config-extension",
            "type": "com.hcl.connections.custom.style",
            "payload": {
                "style-customization": {
                    "top-navigation": {
                        "logo": {
                            "position": "left",
                            "order": "1",
                            "src": "https://connections.solvito.de/images/sologo.svg"
                        }
                    }
                },
                "cacheExpiration": 20000
            },
            "path": "global",
            "state": "enabled"
        }
    ]
}

Just had to re-login after I enabled this extension. I use nginx as a caching proxy too based on the LTPA Token.

In the browsers developer tools, you should see multiple requests to /appregistry/api/v3

Usually when something is strange with the appreg, I sometimes forgot to enable the traffic from nginx to mw-proxy

jansh90 · October 18, 2023, 7:37am

Thanks for checking & confirming that this works for you.
In the meantime I also started discussing the topic with HCL support and they also confirmed that it works for them. So obviously something is wrong with my environment. I still do not understand why "HelloWorld"-extension works but not the others. The issue is still being investigated...

anon-2450 · October 18, 2023, 5:32pm

Extensions of type com.ibm.customizer.ui (of which the Hello World example is one) are associated with the 'Customizer' service type and Connections page requests defined in nginx routes are sent to mwproxy service and it makes the request to appregistry to get the relevant extensions on behalf of the user, so you don't see those in the browser.

Extensions of type com.hcl.connections.custom.style are associated with the services type Connections and are processed by the v8 UI react components when loaded in the browser; they each request their relevant extensions directly from appregistry. If you look at the browser network trace you will see several when pages load including this one mentioned in the thread above: /appregistry/api/v3/services/Connections/extensions?type=com.hcl.connections.custom.style

To avoid making the requests from the v8 react components in environments that do not have appregistry service available, we made them conditional on an existing configuration switch to let us know if it is. If you are not seeing the browser making any requests to /appregistry/api/v3/services/Connections/extensions at all, then please check that in LotusConnectionsConfig.xml that the service entry for "extensionRegistry" is enabled (true). mwproxy service has no such dependency on that service config since if mwproxy is enabled, there is no reason to think appregistry won't also be there.

David (Senior Technical Architect, HCL Software Digital Solutions)

jansh90 · October 24, 2023, 9:00am

Thank you very much for this clarification ! It works when enabling extensionRegistry !!

I was wondering why your colleaguers did not notice and why this mandatory configuration is in the section for "MS Teams integration". I am not using Teams but still I need to configure it to use the Customizer. Very confusing...