How to launch a DHIS2 App from within another DHIS2 App programmatically

Hello Backend Dev Team, @dhis2-backend

I have simple and perhaps stupid question:

How can you launch a DHIS2 App from within another DHIS2 App programmatically?

Looking at the DHIS2 Dev manual the “Launching Apps” section 2.4 only states that the App once installed is available in the menu but no mention as to how to access it programmatically.

On the other hand, the “Creating Apps” section 2.2, shows a ‘launching path’ in the manifest of the App. So would it be just a matter of reference that launching path as a URL to navigate to another App from within your current App?

Your help on this would be very much appreciated.

Best,
Armand

Hello Armand

To launch an app within another app, you could create a link within your app which points to the app you want to open. These links can be found on your browser’s address bar when you open a specific application in DHIS2.

So, for example, I have a custom app that needs to open the DHIS2 settings app. I would first acquire the settings app URL from the address bar (shown below).

The given URL has 2 parts:

  1. The base URL: The URL at which the DHIS2 instance is hosted i.e https://play.dhis2.org/2.35.6. Which changes based on the DHIS2 instances
  2. Application endpoint: URL describing the location of the given app i.e /dhis-web-settings/index.html#/general. This is normally the same across different instances. It may change if the name of the app changes.

If the base URL will not change, (if the app is deployed on only one DHIS2 instance), to create a link in the app you can pass the whole URL to link if the app:

<a href="https://play.dhis2.org/2.35.6/dhis-web-settings/index.html#/general">Go to Settings</a>

If the DHIS2 base URL is unknown at the time of implementation (the app is deployed on different DHIS2 instances), you have to dynamically insert the baseUrl. If you are using the DHIS2 App Platform to create your app, the baseUrl can be obtained from the useConfig hook:

import {useConfig} from '@dhis2/app-service-config'
...
const SettingsAppLink = () =>{
	const {baseUrl} = useConfig()
	const settingsUrl = baseUrl + "/dhis-web-settings/index.html#/general"
	return(
	<a href={settingsUrl}>Go to Settings</a>
	)
}

Note: The navigation will give an error if the logged-in user does not have access to the application.

I hope this helps.

Regards,
Gift

3 Likes

Great explanation @nnkogift, thank you!

@nnkogift Great, thank you so much for taking the time to provide such a clear explanation, this is all well noted, Cheers!

2 Likes