How to :: Create a Self Service Experience for your End Users [BETA]¶
If you need to give your users the ability to explore their data through visualizations, then you’re at the right place!
Important
Make sure to clean and prepare your data before you let your self-service users explore it through visualizations. It’s super important to give them the best experience!
Introduction: Data & Permissions¶
Let’s take a super easy example to show you how to implement Self Service Visualization inside your product. Here I have simple datasets about sales records from my 2 customers: Pigeon Data and Water Fox.

Dataset Preview
Now, I want to add Permissions on the data to separate it according to my user groups.
- Pigeon Data users have pigeon-data group.
- Water Fox users have water-fox group.
Basically, based on the group I’ll filter my dataset to return the right
slice of data only.
Tip
Note that our example is with Toucan toco’s groups but it also works with arbitrary attributes that can be inside an user authentication token!
I have now my 2 rules configured.

Overview Permissions
Let’s begin leverage the Embed SDK to create Self Service Visualizations for my users!
Create Self Service Dashboards¶
Let’s say that our users look like that:
Pigeon Data’s user | Water Fox’s user | |
---|---|---|
username | self@pigeondata.fr | self@waterfox.com |
roles | [“USER”] | [“USER”] |
groups | [“pigeon-data”] | [“water-fox”] |
privileges | { “ssv-app”: [“self-contribute”] } | { “ssv-app”: [“self-contribute”] } |
What’s important here is that we introduce a new privilege:
self-contribute
.
The user can:
- edit the dashboard they own.
- create a “simple” story via a new and easy Light Editor.
- use a story pre-configured inside the linked application but CAN’T edit it.
Let’s see how your developers will enable the experience for your users.
Create the dashboard¶
If you want to directly generate the Self Service Dashboard, the first thing you’ll need to check is if a dashboard exists already for your user using retrieveAndInsertLayoutByAuthor SDK’s method.
Example with self@pigeondata.fr
:
const instance = new TcTcEmbed('MY_SDK_KEY');
const userToken = localStore.getItem('toucanTocoToken');
const username = 'self@pigeondata.fr'
instance.retrieveAndInsertLayoutByAuthor(
username,
userToken,
'ssv-app',
document.getElementById('embed-parent'), // the "id" is 100% your choice, it has to exist inside your DOM
)
As we don’t have a dashboard yet for self@pigeondata.fr
, the method
will throw an Error that we can catch in order to create one with
createLayout.
const instance = new TcTcEmbed('MY_SDK_KEY');
const userToken = localStore.getItem('toucanTocoToken');
const username = 'self@pigeondata.fr'
const instance.retrieveAndInsertLayoutByAuthor(
username,
userToken,
'ssv-app',
document.getElementById('embed-parent'), // the "id" is 100% your choice, it has to exist inside your DOM
).then(() => {
}).catch(() => {
// There's no dashboard, let's create one!
instance.createLayout(
'dashboard',
userToken,
'ssv-app',
document.getElementById('embed-parent'),
{
author: username,
}
);
});
Tip
You can also create a Dashboard from an existing one! It will duplicate the current configuration then new things are scoped to the new dashboard!
Create from Template¶
This could be useful if you want to put a pre-configured Dashboard to your self service users to avoid them to begin from sratch, pushing them already created beautiful stories!
For instance, you can create that Dashboard and use it as a template.
Let’s say its id is MY_TEMPLATE_DASHBOARD_ID
, thanks to
createLayout
, you’ll be able copy it for your self-service users.
Tip
Note that all the stories will be non editable but the layout is!
instance.createLayout(
'dashboard',
userToken,
'ssv-app',
document.getElementById('embed-parent'),
{
author: username,
from: 'MY_TEMPLATE_DASHBOARD_ID' // Put the embed id of an existing dashboard
}
);
Now, our self-service user can enter the Edition Mode and will be able to create their own visualizations with the Light Editor!
Create stories with the Light Editor¶
The Light Editor is a no-code smart and simple editor that integrates data transformation behind the scenes. It allow data-neophyte user to quickly write their stories!
Warning
As of today, only the Leaderboard, Barchart, Linechart and Stackedbarchart are available! More are on the way!
Your user will land on an empty dashboard, ready to begin their journey to create insightful stories!

SSV - Empty Dashboard Builder
Clicking on “Insert a row”, they’ll have the possibility to create or use existing stories !

SSV - Choose Content
And that’s where the Light Editor comes into play! Your user will be invited to choose the dataset they want to use (prepared in advance by you), and create their first Story!

SSV - Light Editor Empty

SSV - Light Editor Select Data
Once they select the right data, your user will be able to configure their chart! Now, let’s dive deeper to discover the different aspects of the Light Editor!
On the left, we have your data columns names and types!

SSV - Light Editor Data Columns
In the center, our Smart Form helps you to quickly create your stories, including on the fly automatic data aggregation!

SSV - Light Editor Chart Configuration
Finally, on the right is your chart preview!

SSV - Light Editor Chart Preview
Let’s take a simple Linechart configuration to illustrate the Light
Editor’s “smartness”. On all displayed numbers fields (eg: value
or
variation
), the form will add an aggregation operation. By default,
it’s a sum formula but your users can change it for any other formula
according the story to tell!

SSV - Light Editor Sum Aggregation

SSV - Light Editor Aggregation Steps
Tada! You can now publish your dashboard with your first story!

SSV - Publish
Coming Soon in the Light Editor¶
- Compute the
count
oflabel
- Compute a custom arithmetical formula from data columns
- Add filters in stories and at dashboard level
- Easy configuration for the Waterfall Chart
Stories & data available for Self Service user¶
Story¶
You can push stories that you’ve created before! To choose which one is available for which users, you can rely on the “Visibilities” rules on the stories, directly from the application.

SSV - Visibilities
Don’t know about Visibilities? Have a look!
If the end user can select one of your pre-written stories, she will not able to edit it: it’s read-only.
She will be able to:
- Change the story’s position
- Resize the story
- Delete the story from her dashboard