Creating a Dashboard Widget Using App Platform

Development - Développement
1

Hello,

Is it possible to create dashboard widgets using the App Platform?

Thanks.

Gift.

1 Like
2

Hey @nnkogift
Thank you for your question! May I ask you what exactly do you mean by a dashboard widget? Is it like an app that makes changes to a dashboard but you want it to appear alongside the dashboard control buttons, or is it an item in a dashboard related to an app? Please explain further! (:

3

Hey @Gassim

A dashboard widget is an app available from the search box on the dashboard, can be added as an item on any dashboard. It is one of the app types listed here as the DASHBOARD_WIDGET

1 Like
4

Thanks! Really good question. I’m still learning but hope I’ll be able to help you with this too :smiley: I imagine you mean something like the scorecard app presented in (Analytic Tools Day 9 Part 4 Dashboards - YouTube - video URL at the time of mentioning the app)?

I see that the link you shared is actually deprecated and mentions the “d2-manifest” which is where supposedly you’d change the “appType,” but it seems that this will be taken care of by the App Platform. I’d recommend you read this blog post by @varl: https://developers.dhis2.org/blog/library-deprecations/

1 Like
5

Yes! I meant an app just like the Scorecard widget. I went through the App Platform documentation and saw that there are only two types of application supported, lib and app(here). There isn’t any reference to dashboard widgets. Does this mean they are no longer supported?

6

Yes, you are right! I think the “app” will inherintly allow you to create the dashboard plugin without a need to create two separate projects, so I think @austin explains this when he mentions the Native Plugin Builds in this video (URL at the time of mentioning the Native Plugin Builds) Webinar on Web and Android App Development: Web Platform Updates & Roadmap - YouTube

1 Like
7

Thank you for the link to the video. It has helped me understand. I do think Native Plugin Builds has not been implemented yet on the App Platform. Right?

1 Like
8

Yeah, I tried to search for info in the roadmap Log in with Atlassian account but I’m not sure I can find more info about Native Plugin Builds, so maybe @austin can update us. Thank you!

1 Like
9

@nnkogift this isn’t fully supported by the platform yet, but it will be soon!

1 Like
10

Thanks @austin for the info. Thanks @Gassim for the help :pray:

1 Like
11

@austin Is this still the case? (dashboard type widgets are not supported)
cc: @nnkogift , @Gassim

1 Like
12

Hey Pete! Unfortunately the platform still doesn’t exactly support that (without some hacks*)

What we’re working on now though is making a more flexible plugin system using the App Platform, and then loading those plugins in dashboard items via iframes – the existing Data Visualizer, Maps, and Line Listing items on the dashboard are already using that system. When it comes to using custom plugins in the dashboard though, we’re not quite there yet, but here’s an issue to track the progress: [DHIS2-17283] - Jira

We already have some tools in the Platform to make and consume plugins, but they’re pretty new, so the documentation is limited, and the API isn’t yet guaranteed to be stable. BUT, if you’re curious about them, you can check out this page about a component that can be used in an app hosting a plugin. The examples at the bottom of the page may be especially illustrative – notice the entrypoints.plugin property in d2.config.js, and how that gets built with a plugin.html file in the app build

*Those hacks would be 1) removing the header bar, and 2) adding appType: "DASHBOARD_WIDGET" to the manifest.webapp file that’s generated for apps; but I think we’re moving away from supporting this

5 Likes
13

Hey @plinnegan

Since we needed the development of the dashboard widget for various projects, we created a template repository here which is a normal react app (not bootstrapped from app-platform) but has support for various app-runtime & app-platform features.

3 Likes
14

Amazing thanks both @kpvandivier and @nnkogift! This is incredibly useful!

2 Likes
15

I managed to create a Dashboard widget using HTML and JQUERY and added the widget to the dashboard as depicted below

image
image1822×735 56.4 KB

I however , want to get the orgunit from dashboard filters rather the custom drop down

1 Like
16

I managed to get the parameters by adding the following code to my jQUERY function

function getUrlParameter(name) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name);
}

        // Get the userOrgUnit parameter from the URL
        var userOrgUnit = getUrlParameter('userOrgUnit');
1 Like