Skip to content

Commit ae48aa6

Browse files
chore: update external content [CI skip]
1 parent 0a1361c commit ae48aa6

File tree

8 files changed

+268
-0
lines changed

8 files changed

+268
-0
lines changed
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"label": "User onboarding",
3+
"position": 10,
4+
"link": {
5+
"type": "generated-index"
6+
}
7+
}
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
sidebar_position: 40
3+
title: Guide recorder
4+
---
5+
6+
# Guide Recorder
7+
8+
## What is Guide recorder?
9+
10+
In Simplicité [version 6.3](/versions/release-notes/v6-3), **Guide Recorder** is a helper tool to build a guide tour directly while navigating the UI.
11+
12+
It allows guide creators to **capture each step of a guide**, define instructions, and configure actions interactively.
13+
14+
15+
## How to Access Guide Recorder
16+
17+
Access to **Guide Recorder** is restricted:
18+
19+
- Users must have the `GUIDE_MAKER` responsibility.
20+
- Users must have read access to the **DomainSocialUser** domain.
21+
22+
Without domain access, Guide Recorder will not be visible, even if the user has the `GUIDE_MAKER` responsibility.
23+
24+
The menu can be found under **User Interaction > User Onboarding** in the application.
25+
26+
![](img/useronboarding/guiderecorder.png)
27+
28+
## Guide Recorder Usage
29+
30+
To create a guide using Guide Recorder:
31+
32+
1. **Navigate to the target screen** where you want to start the guide.
33+
2. **Activate Guide Recorder** from the menu.
34+
3. For each step in the guide:
35+
- **Right-click** on the UI element you want to highlight.
36+
- **Enter the step details** in the dialog that appears:
37+
- **Step name** – The internal name of the step, used to identify it within the guide. Keep it short and descriptive (e.g., "Login Button").
38+
- **Tooltip short title** – A brief title shown in the tooltip to summarize the step for the user. Usually one line (e.g., "Click to log in").
39+
- **Tooltip long info** – Detailed instructions or explanations displayed in the tooltip. Provide context, guidance, or warnings (e.g., "Click this button to access your dashboard after entering your credentials.").
40+
- **Selector** – The CSS or UI element selector that identifies the target element for the step. This is usually captured automatically but can be adjusted if needed.
41+
- **Position** – The placement of the tooltip relative to the target element. Options: `top`, `bottom`, `left`, `right`. Choose a position that is clearly visible.
42+
- **Next event** – Defines what happens after the step is completed. Options include "Click", "Input Text", "Navigate to page", or "Wait for user interaction". Controls the flow to the next step.
43+
44+
![](img/useronboarding/guiderecorder2.png)
45+
4. **Repeat the process** for every step of the guide.
46+
5. **Save the guide** once all steps are captured.
47+
48+
### Tips for Effective Guides
49+
50+
- Keep instructions **concise and clear**.
51+
- Highlight only **necessary elements** to avoid clutter.
52+
- Test the guide in **preview mode** to ensure steps execute correctly.
53+
54+
## Managing Guides
55+
56+
After recording steps:
57+
58+
- **Edit Steps** – modify titles, descriptions, or actions if needed.
59+
- **Reorder Steps** – change the sequence of the guide if necessary.
60+
- **Preview the Guide** – simulate the guide as an end-user to verify clarity.
61+
- **Publish** – make the guide available to end-users.
62+
63+
64+
65+
66+
67+
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
sidebar_position: 30
3+
title: Guides Usage
4+
---
5+
6+
# Guides Usage
7+
8+
## What is Guides Usage?
9+
10+
In Simplicité [version 6.3](/versions/release-notes/v6-3), **Guides Usage** provides visibility into how onboarding guides are actually used by end-users.
11+
12+
It tracks **who played a guide, when, and how far they went**, and aggregates this data into **[pivot tables](/make/userinterface/objectsrendering/pivot-table)** for managers or administrators.
13+
14+
With Guides Usage, you can:
15+
- Measure **adoption of guides** after a release.
16+
- Track **completion rates**.
17+
- Identify **inactive users**.
18+
- Compare usage across **dates, users, and guides**.
19+
20+
21+
## How to Access Guides Usage?
22+
23+
Access to **Guides Usage** is restricted:
24+
25+
- Users must have the `GUIDE_MAKER` responsibility.
26+
- They must also have read access to the **DomainSocialUser** domain.
27+
28+
Without this domain access, the usage data (user names, logins, history) will not be visible, even if the user has the `GUIDE_MAKER` responsibility.
29+
30+
The menu is available from **User interaction > User onboarding** in the application navigation.
31+
32+
33+
## Guides Usage List
34+
35+
The list displays **tracking events** for each guide launch:
36+
37+
- **Date** – when the guide was played.
38+
- **Guide Name** – identifier of the guide.
39+
- **Guide Target Object** – the context where the guide was launched (e.g. a business object, dashboard...etc.).
40+
- **User Login / User Name** – the user who played the guide.
41+
- **Last Step** – last step reached (completed or interrupted).
42+
43+
44+
## Guides Usage pivot tables
45+
46+
Beyond the list, **pivot table** summarize adoption.
47+
By monitoring Guides Usage, administrators and project managers can:
48+
- Ensure onboarding content is actually used.
49+
- Validate whether guides **help reduce support requests**.
50+
- Plan **updates to guides** if adoption is low.
51+
52+
### Metrics by User
53+
A **pivot table (User × Guide)** displays how many times each user played each guide.
54+
55+
### Metrics by Date
56+
A **time-based pivot table** highlights period of activity, showing how often guides were used within a given timeframe (day, week, month).
57+
58+
59+
60+
61+
43 MB
Loading
419 KB
Loading
23.3 KB
Loading
19.6 KB
Loading
Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
---
2+
sidebar_position: 20
3+
title: User guides
4+
---
5+
6+
# User Guides
7+
8+
## What is a User Guide?
9+
In Simplicité [version 6.3](/versions/release-notes/v6-3), a **User Guide** is an interactive tour designed to onboard users and help them understand how to use the application.
10+
A guide can walk the user through various parts of the UI, highlighting steps, actions, and interactions.
11+
12+
User Guides can be:
13+
- Launched from any **view**, **home page**, **business object**, **dahboard**, **Domain home** or **external object**.
14+
- Restricted to a **limited period of availability**.
15+
- Made visible only to **specific user groups**.
16+
- Composed of multiple **steps**:
17+
- On a single page.
18+
- Across several asynchronous pages or dialogs.
19+
- With required user interactions (clicking a button, completing a field, etc.).
20+
21+
With User Guides, Simplicité provides a structured, interactive way to onboard users and support application adoption.
22+
23+
## How to Create a User Guide?
24+
25+
### Accessing Guides
26+
Users with the `GUIDE_MAKER` responsibility gain access to the **Guides** menu, which includes:
27+
28+
1. **User guides** – full definitions of guides with step settings and permissions.
29+
2. **Guides usage** – tracking information (who used a guide and when).
30+
3. **Guide recorder** – a helper tool to build a guide skeleton directly while navigating the UI.
31+
32+
### Creating a Guide
33+
1. Go to **User Interaction > User guides**.
34+
2. Click **Create** a new Guide.
35+
3. Define the following properties:
36+
- **Name** – unique key for the guide.
37+
- **Module name** – the [module](/make/project/module) to which the guide belongs.
38+
- **Target object** – Simple view, home page, business object, dashboard, domain home or external object.
39+
- **Availability period** – optional start/end dates.
40+
- **Order** - defines the order of display when multiple guides are available.
41+
- **Auto launch** – automatically launches the guide when the user first accesses the target object.
42+
- **Tour settings** – advanced options such as display style, navigation controls, or steps.
43+
44+
4. Define **steps** for the guide:
45+
- Page or dialog context.
46+
- Target element in the UI.
47+
- Step description/instruction.
48+
- Expected user interaction (click, input, validate, etc.).
49+
50+
5. Save the guide and test it in the UI.
51+
52+
![](img/useronboarding/guide1.png)
53+
### Creating a Tour
54+
A **Tour** is a structured JSON object that defines a guide with **steps**, **conditions**, and **exit behavior**.
55+
56+
#### Structure of a Tour
57+
```js
58+
{
59+
name: "GuideName",
60+
condition: { ... }, // Launch conditions and access rules
61+
steps: [ { ... }, ... ], // List of guide steps
62+
exitToast: { ... } // Optional message at the end of the tour
63+
}
64+
```
65+
#### Launch Conditions
66+
The condition defines when and how the tour can be launched:
67+
- context - location in which the tour is launched.
68+
- inst - instance name of the target object/view.
69+
- access - function to check user permissions.
70+
- init - optional logic to verify the page or elements are ready.
71+
```js
72+
condition: {
73+
context: "list", // Launch context: "list", "form", etc.
74+
inst: "the_ajax_Object", // Technical instance name of the target object
75+
access: function(ctn) { // Optional access control function
76+
return $grant.accessCreate("ObjectName") && $grant.accessUpdate("ObjectName");
77+
},
78+
init: function(ctn, tour) { // Optional initialization logic
79+
// Example: check if a button exists before starting
80+
let btn = $(".objlist.object-MyObject button[data-action='create']", ctn);
81+
if (!btn.length) return null; // stop playing
82+
return true; // ready to go
83+
}
84+
}
85+
```
86+
#### Defining Steps
87+
Each step guides the user through an action or element:
88+
- step - identifier for the step.
89+
- title - multilingual step title.
90+
- info - optional description text.
91+
- attach - tooltip positioning and target element.
92+
- next - how to proceed to the next step (event or condition).
93+
```js
94+
{
95+
step: "step-id",
96+
title: { FRA: "Titre", ENU: "Title" },
97+
info: { FRA: "Description", ENU: "Description" },
98+
attach: { pos: "bottom", align: "center", sel: "CSS selector" },
99+
next: { event: "click", condition: function(ctn, obj, tour){ return true; } }
100+
}
101+
```
102+
#### Exit Message
103+
At the end of a tour, you can display an optional message:
104+
```js
105+
{
106+
exitToast: { FRA: "Merci et à bientôt !", ENU: "Thank you and see you soon!" }
107+
}
108+
```
109+
110+
### Using the Guide Recorder
111+
The **Guide Recorder** (experimental feature) helps create a guide quickly:
112+
1. Run through the desired journey in the UI.
113+
2. Right-click on elements you want to include as guide steps.
114+
3. Simplicité generates a **guide skeleton** with generic DOM selectors.
115+
4. Refine the guide:
116+
- Adjust selectors for stability.
117+
- Add missing steps.
118+
- Define permissions.
119+
120+
The recorder provides a starting point; the guide designer must complete the setup for a functional onboarding tour.
121+
122+
## How Users Access Guides
123+
124+
### GUIDE_USER Responsibility
125+
End-users need the `GUIDE_USER` responsibility to access guides.
126+
127+
Guides can be:
128+
- **Automatically launched** (once per user).
129+
- **Replayed** at any time with a button in the UI.
130+
131+
![](img/useronboarding/guide.gif)
132+
133+

0 commit comments

Comments
 (0)