Creating Document Tours

Document tours are used in many examples in https://templates.getgrist.com/

The implementation isn’t polished as a feature that you could apply to your own documents in a UI-friendly way. However, if you’re willing to dig in a little, it’s very easy to do.

Here’s the fastest way to learn how to build one:

  1. Visit a template with a doc tour and edit the URL to add /p/GristDocTour after the document’s name. E.G. Meme Generator

    This reveals a special, hidden table named GristDocTour. It is only visible when you modify the url as described above.

    GristDocTour may have up to 7 columns.

    • Title - the pop-up header; this is a text column
    • Body - the pop-up body; this is a text column
    • Placement - a text column that places the pop-up in relation to a cell with words like right, top, bottom. https://popper.js.org/ has an interactive tool that shows how this works.
    • Location - a text, formula column with the formula SELF_HYPERLINK()+$Location_Cell SELF_HYPERLINK adds the URL through to the end of the document’s title.
    • Location Cell - another text column. This is where you copy and past a cell’s anchor link from /p onwards. E.G. /p/3#a1.s3.r3.c3
    • (Optional) Link URL - this adds a link after the body text
    • (Optional) Link Text - this adds a text label to the Link URL
    • (Optional) Link Icon - add a small icon before the link. Available icons listed here: grist-core/app/client/ui2018/IconList.ts at main · gristlabs/grist-core · GitHub
  2. Create a table named GristDocTour in your document with the columns described above.

    To find anchor links, right-click on any cell to open a context-menu and select "Copy anchor link’ or use the shortcut Ctrl+Shift+A.

    image

5 Likes

Hello. I like the way this works, however, I’d like to report the following:

  1. If I have more than a few entries in the “GristDocTour” table then the “Previous” and the “Next” buttons fall outside the tooltip box.

  2. The tour works great if I am the owner of the document, however, if I test it as an Editor, the tool tips remain on the same page/spot and do not follow the anchor links.

Hi Daniel!

Could you send me a screenshot of what you’re seeing in #1? I think I am imagining it, but want to be clear.

For #2, does the editor have view-access to the pages/tables/cells being linked to?

Is it possible to add a reference to the last valid row? For example, when a new user starts using the document, we don’t know how many records where created. But I would like to point the user to the last record, so he/she can start entering data.

something like: p/1#a1.s13.r(last).c26

Thank you!

Ah, that’s not yet possible, but that would be cool!

A workaround would be to calculate the last row number using a formula, e.g. len(Table.all).

However, this won’t work very well in a sorted or filtered table.

1 Like

I found out something interesting today.

If you scroll until the end of the table, and selct the last row, and then start the tour, it uses that row instead of the first one (where I created the Tour). Actually it works with any row. So it would only be a matter of telling new users to go to the last row.

After inital viewing of the doc tour the tour does not show again.
How can we, for developement purposes for a tour, reset that to see the tour again over and over?

Hi!

Is there no button allowing you to see it again?

Hi Nick,
there is. Thanks :slight_smile:
Great feature by the way. We love it.

2 Likes

Hi Nick,
just as note, when making a long doc tour we get many dots, one may see a need to improve that from visual perspective.

Screenshot 2024-03-18 111549

1 Like

GristDocTour is avalable for self-hosted Grist?

Yes, I am currently using it

Very strange if i go to /p/GristDocTour and not see GristDocTour table

Have you CREATED the page?

The page doesn´t exist, automatically hidden.

You must first create it and as soon as you create it disappears until you change the URL.

The help files are not very clear about it. They mention just adding the /p/GristDoc in the URL, but that’s for the online examples where the doctour was already created.

2 Likes

Thank you, you helped a lot, now it’s clear how it works!

I want to add custom widgets to the tour, but custom widgets don’t have anchor links.
How do I get an anchor link for a custom widget?

or is there a workaround?

Hey @Karl !

Unfortunately not. You are limited since you can only create anchor links for cells. If I am referring to a widget that can’t generate an anchor link, then I just link the page and include language in the body specifying where the user should be looking. For example, ‘In the calendar widget in the lower-right of the page…’.

In the Recurring Tasks template, I am not even that specific - here, I simply reference the button by its label.

I would absolutely love it if we could link to specific widgets in doc tours! However, implementing this would require a significant amount of development work, and up until now, I’ve been the only one expressing interest in this feature (I make a lot of doc tours :joy:). We prioritize updates based on the interest and feedback from our users, so as demand grows, I can certainly talk to the team to reprioritize! I’ll definitely be adding you as a +1 vote to the improvement idea.

For anyone coming to this thread, if this is something you too would be interested in, please comment so I can add you as a +1 to the improvement idea as well :hugs:

1 Like