Interactive Tutorial | Nocobase Main Page

English Forum Questions
1

Hi team, I really like the interactive tutorial popup on the main nocobase website. When you click the “Try it yourself” button a popup displays and it takes you through a step by step tutorial with each step requiring the user to click the specific area on screen being covered (see screenshots). What tool did you use to build this? Is it possible for me to create one myself and use in my nocobase project? Thanks!

image
image1897×917 216 KB

image
image1818×739 66.2 KB

3

Hi everyone, I figured out a quick and simple way to add a JS powered step by step tutorial feature to nocobase. I used an open source tool called: driver.js

Here’s a simple test I did with Claude:

-Asked Claude to deeply review Driver JS and Nocobase 2.0 docs online

-I took a screenshot of the CRM dashboard page in the nocobase demo and shared it with Claude.

-I asked Claude to write a simple code for the new JS data block.

-Claude provided code (see below) that I copied and pasted into the JS data block.

-With just a screenshot of the dashboard Claude created a simple 5 step guided tutorial. Everything runs with the new JS data block! See screenshots.

image
image1920×1080 239 KB

image
image1920×1080 245 KB

Here’s the code:
// === GUIDED TOUR USING ANT DESIGN TOUR (SANDBOX COMPATIBLE) ===

const { Button, Tour, Space, Typography } = ctx.libs.antd;
const { Title, Text } = Typography;
const React = ctx.libs.React;
const { useState, useRef, useEffect } = React;

// Tour Component
const DashboardTour = () => {
const [open, setOpen] = useState(false);
const [currentStep, setCurrentStep] = useState(0);

// Define tour steps with CSS selectors for page elements
const steps = [
{
title: ‘:wave: Welcome to Your CRM!’,
description: ‘This guided tour will show you around the dashboard. Let's get started!’,
target: null, // No target = centered modal
},
{
title: ‘:round_pushpin: Navigation Menu’,
description: ‘Use this sidebar to access Leads, Accounts, Contacts, Opportunities and more.’,
target: () => document.querySelector(‘.ant-layout-sider’),
placement: ‘right’,
},
{
title: ‘:mag: Filter Your Data’,
description: ‘Use these filters to narrow down records by date, status, or owner.’,
target: () => document.querySelector(‘.ant-card’),
placement: ‘bottom’,
},
{
title: ‘:bar_chart: Key Metrics’,
description: ‘These cards show your important KPIs at a glance - revenue, leads, and conversion rates.’,
target: () => document.querySelectorAll(‘.ant-card’)[1] || document.querySelector(‘.ant-card’),
placement: ‘bottom’,
},
{
title: ‘:tada: Tour Complete!’,
description: ‘You now know the basics. Explore the menu items to discover more features!’,
target: null,
}
];

return (
<Space direction=“vertical” style={{ width: ‘100%’, padding: ‘16px’ }}>
:dart: Dashboard Tour
New here? Take a quick tour to learn the basics.
<Button
type=“primary”
size=“large”
onClick={() => {
setCurrentStep(0);
setOpen(true);
}}
style={{ marginTop: ‘8px’ }}
>
:arrow_forward: Start Guided Tour

  <Tour
    open={open}
    onClose={() => setOpen(false)}
    current={currentStep}
    onChange={setCurrentStep}
    steps={steps}
    indicatorsRender={(current, total) => (
      <span>{current + 1} / {total}</span>
    )}
  />
</Space>

);
};

ctx.render();

4 Likes