Flick through SaaS communities on Twitter, LinkedIn, Reddit, Discord, you identify it and also you’ll see a standard theme seem in a lot of them. That theme can go by many names: BI, analytics, insights and so forth. It’s pure, we do enterprise, acquire knowledge, we succeed or fail. We wish to look into all of that, make some sense of the info we now have and take motion. This want has produced many initiatives and instruments that make the lives of anybody who needs to look into the info only a bit simpler. However, when people have, people need extra. And on the planet of BI and analytics, “extra” usually comes within the type of embedding, branding, personalized styling and entry and so forth. Which finally ends up that means extra work for builders and extra time to account for. So, naturally there was a necessity for BI instruments that may let you could have all of it.
Let’s make an inventory of challenges it’s possible you’ll face because the builder and maintainer of those dashboards:
You wish to make the dashboards obtainable to finish customers or viewers from inside your individual utility or platformYou need to have the ability to handle completely different dashboard collections (i.e. “integrations”)You need to have the ability to grant particular person rights to a set of dashboards and datasetsYou wish to be sure that customers have entry to knowledge solely related to them
Cumul.io offers a instrument we name Integrations which helps remedy these challenges. On this article I’ll stroll you thru what integrations are, and the way to set one up. The cool factor is that for many of the factors above, there’s minimal code required and for essentially the most half may be set inside the Cumul.io UI.
Some Background — Integrations
An Integration in Cumul.io is a construction that defines a set of dashboards meant for use collectively (e.g. in the identical utility). Additionally it is what we use to embed dashboards into an utility. In different phrases, to embed dashboards into an utility, we give the appliance entry to the combination that they belong to. You possibly can affiliate dashboards to an integration and administrate what kind of entry rights the top customers of the combination can have on these dashboards and the datasets they use. A dashboard could also be part of a number of integrations, however it might have completely different entry rights on completely different integrations. In relation to embedding, there are a selection of SDKs obtainable to make life easy no matter what your stack appears like. 😊
After you have a Cumul.io account and in case you are an “proprietor” of a corporation in Cumul.io, it is possible for you to to handle and preserve your entire integrations by way of the Integrations tab. Let’s take a look at an instance Cumul.io account. Under you may see the Dashboards that one Cumul.io person may need created:
Though these are all of the dashboards this person could have created, it’s seemingly that not all dashboards are meant for a similar end-users, or utility for that matter. So, the proprietor of this Cumul.io account would create and preserve an Integration (or extra!) 💪 Let’s take a look at what which may appear to be for them:
So, it appears just like the proprietor of this Cumul.io account maintains two separate functions.
Now let’s see what the method of making an integration and embedding its dashboards into an utility would appear to be. The excellent news is, as talked about earlier than, a number of the steps you’ll have to take may be performed inside the Cumul.io UI.
Disclaimer: For the needs of this text, I’ll solely concentrate on the Integration half. So, I’ll be skipping all the pieces to do with dashboard creation and design and we might be beginning with a pre-made set of imaginary dashboards.
What we might be doing:
Creating an Integration
For simplicity, let’s solely create one integration for now. Let’s think about we now have an analytics platform that we preserve for our firm. There are three dashboards that we wish to present to our end-users: the Advertising and marketing Dashboard, the Gross sales Dashboard and the Leads Dashboard.
Let’s say that out of all of the dashboards this account has created or has entry to, for this specific venture they wish to use solely the next:
New Integration
To create the combination, we go to the Integrations tab and choose New Integration. The dialogue that pops up will already provide you with some thought of what your subsequent steps might be:
Deciding on Dashboards
Subsequent up, it is possible for you to to pick which of your dashboards might be included on this integration. Additionally, you will be capable to give the Integration a reputation, which right here I’ve determined will appropriately be “Very Necessary Integration”:
When you affirm your choice, you should have the choice of defining a slug for every dashboard (extremely really useful). These can later be used whereas embedding the dashboards into your utility. You’ll later see that slugs make it simple to reference dashboards in your front-end code, and make it simpler to interchange dashboards if wanted too (as you received’t want to fret about dashboard IDs within the front-end code).
Entry Rights
You’ll then get to set the combination’s entry rights for the datasets its dashboards use. Right here we set this to “Can view.” For more information on entry rights and what they entail, try our associating datasets to integrations:
Filters and Parameters (and Multi-Tenant Entry)
Aspect Word: To assist with multi-tenant entry — which might make sense on this imaginary arrange — Cumul.io makes it potential to set parameters and filters on datasets {that a} dashboard makes use of. Because of this every person that logs into your analytics platform would solely see the info they personally have entry to within the dashboards. You possibly can think about that on this situation entry can be primarily based on which division the top person works for within the firm. For extra on the way to arrange multi-tenancy with Cumul.io, try our article, “Multi-Tenancy on Cumul.io Dashboards with Auth0”. This may be performed inside the dashboard design course of (which we’re skipping), which makes it simpler to visualise what the filters are doing. However right here, we might be setting these filters within the Integration creation course of.
Right here, we set the filters the datasets may must have. On this situation, as we filter primarily based on the customers’ departments, we outline a division parameter and filter primarily based on that:
And voilà! When you’re performed with setting these, you could have efficiently created an integration. The subsequent dialogue will provide you with directions for what might be your subsequent steps for embedding your integration:
Now you’ll be capable to see this model new Integration in your Integration tab. That is additionally the place you should have fast entry to the Integration ID, which is able to later be used for embedding the dashboards.
Excellent news! After your Integration is created, you may at all times edit it. You possibly can take away or add dashboards, change the slugs of dashboards or entry rights too. So that you don’t have to fret about creating new integrations as your utility modifications and evolves. And as modifying an integration is all inside the UI, you received’t want to fret about having a developer set all of it up once more. Non-technical customers can adapt these integrations on the go.
Embedding Dashboards
Let’s see the place we wish to get to. We wish to present the dashboards inside a customized app. Easy, person logs into an app, the app has dashboards, they see the dashboards with the info they’re allowed to see. It might appear to be the next for instance:
Somebody had a really particular imaginative and prescient on how they needed to supply the dashboards to the top person. They needed a sidebar the place they might flip by every of the dashboards. It might have been one thing utterly completely different too. What we’ll concentrate on is how we are able to embed these dashboards into our utility no matter what the host utility appears like.
Cumul.io comes with a set of publicly obtainable SDKs. Right here I’ll present you what you’d do should you had been to make use of the Node SDK. Try our developer docs to see what different SDKs can be found and directions on the way to use them.
Step 1: Generate SSO Tokens For Your Finish Customers
Earlier than you may generate SSO tokens to your finish customers, you’ll have to just remember to create an API key and token in Cumul.io. You are able to do this out of your Cumul.io Profile. It must be the group proprietor with entry to the combination that creates and makes use of this API key and token to make the SSO authorization request. When you’ve performed this, let’s first create a Cumul.io shopper which might be performed within the server facet of the appliance:
const Cumulio = require(“cumulio”);
const shopper = new Cumulio({
api_key: ‘<YOUR API KEY>’,
api_token: ‘<YOUR API TOKEN>’,
});
Now we are able to create the SSO token for the top person. For extra data on this API name and the required fields try our developer documentation on producing SSO tokens.
let promise = shopper.create(‘authorization’, {
integration_id: ‘<THE INTEGRATION ID>’,
kind: ‘sso’,
expiry: ’24 hours’,
inactivity_interval: ’10 minutes’,
username: ‘< A singular identifier to your finish person >’,
identify: ‘< end-user identify >’,
electronic mail: ‘< end-user electronic mail >’,
suborganization: ‘< end-user suborganization >’,
function: ‘viewer’,
metadata: {}
});
Right here, discover how we now have added the optionally available metadata discipline. That is the place you may present the parameters and values with which you wish to filter the dashboards’ datasets on. Within the instance we’ve been going by we’ve been filtering primarily based on division so we might be including this to the metadata. Ideally you’d get this data from the authentication supplier you employ. See a detailed rationalization on how we’ve performed this with Auth0.
This request will return a JSON object that accommodates an authorization id and token which is later used as the important thing/token mixture to embed dashboards within the client-side.
One thing else you may optionally add right here which is fairly cool is a CSS property. This could can help you outline customized feel and appear for every person (or person group). For a similar utility, that is what the Advertising and marketing Dashboard might appear to be for Angelina vs Brad:
Step 2: Embed
We jumped forward a bit there. We created SSO tokens for finish customers however we haven’t but really embedded the dashboards into the appliance. Let’s take a look at that. First up, you must set up and import the Internet part.
import ‘@cumul.io/cumulio-dashboard’;
After importing the part you should utilize it as if it had been an HTML tag. That is the place you’ll embed your dashboards:
<cumulio-dashboard
dashboardId=”< a dashboard id >”
dashboardSlug=”< a dashboard slug >”
authKey=”< SSO key from step 1 >”
authToken=”< SSO token from step 1 >”>
</cumulio-dashboard>
Right here you should have just a few choices. You possibly can both present the dashboard Id for any dashboard you wish to be embedding, or you may present the dashboard slug which we outlined within the Integration setup (which is why I extremely advocate this, it’s way more readable doing it this fashion). For extra detailed data on the way to embed dashboards you may as well try our developer documentation.
A pleasant means to do that step is in fact simply defining the skeleton of the dashboard part in your HTML file and filling in the remainder of it from the shopper facet of your utility. I’ve performed the next, though it’s in fact not the one means:
I’ve added the dashboard part with the ID dashboard:
<cumulio-dashboard id=”dashboard”></cumulio-dashboard>
Then, I’ve retrieved this part within the shopper code as follows:
const dashboardElement = doc.getElementById(“dashboard”);
Then I request the SSO token from the server facet of my utility which returns the required key and token so as to add to the dashboard part. Let’s assume we now have a wrapper operate getDashboardAuthorizationToken() that does this for us and returns the response from the server-side SSO token request. Subsequent, we merely fill within the dashboard part accordingly:
const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) gross sales
Discover how within the earlier steps I selected to outline slugs for my dashboards which might be part of this integration. This implies I can keep away from trying up dashboard IDs and including dashboardId as one in all my parameters of the dashboardElement. As an alternative I can simply present one of many slugs advertising and marketing, gross sales or leads and I’m performed! After all you would need to arrange some kind of choice course of to your utility to resolve the place and if you embed which dashboard.
That’s it of us! We’ve efficiently created an Integration in Cumul.io and in just a few traces of code, we’ve been in a position to embed its dashboards into our utility 🎉 Now think about a situation the place it’s important to preserve a number of functions directly, both for inside the identical firm or separate ones. No matter your situation, I’m certain you may think about how when you have plenty of dashboards the place every of them should go to completely different locations and every of them should have completely different entry rights relying on the place they’re and on and on we go.. The way it can rapidly get out of hand. Integrations can help you handle this in a easy and neat means, multi function place, and as you may see, principally from inside the Cumul.io UI.
There’s much more you are able to do right here which we haven’t gone by intimately. Equivalent to including person particular customized themes and CSS. We additionally didn’t undergo how you’d set parameters and filters in dashboards, or how you’d use them from inside your host utility so that you’ve got a multi-tenant setup. Under yow will discover some hyperlinks to helpful tutorials and documentation for these steps in case you are .
Cumul.io Developer DocsAcademy Article for Including Customized CSSMulti-Tenancy on Cumul.io Dashboards with Auth0Producing SSO TokensEmbedding
The publish Embedded Analytics Made Easy With Cumul.io Integrations appeared first on CSS-Methods. You possibly can help CSS-Methods by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!