BloX Template: Guided Tour/Help
Question: Is there a way to set up tours or help bubbles in your app? Solution: Here is the link to the Github, https://github.com/shipshapecode/shepherd for Shepherd.js. iIt s a Javascript library that can help with the solution. This is how we set up the template to pull in the library. The first link is the CSS that will control the style of the bubbles, and the second is the javascript functions that will be called. { "style": "", "script": "", "title": "", "showCarousel": false, "carouselAnimation": { "delay": 0, "showButtons": false }, "body": [ { "type": "Container", "items": [ { "type": "TextBlock", "text": "<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/shepherd/1.8.1/css/shepherd-theme-arrows-fix.css'/>" }, { "type": "TextBlock", "text": "<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/shepherd.js'></script>" } ] } ], "actions": [ { "type": "Shepherd", "title": "Start Tour" } ] } Once this template is saved, make a custom action. Be sure to name it shepherd or change the type above to match whatever you named your action. Add this to the custom action, this is the code to initialize the tour and add the steps. const tour = new Shepherd.Tour({ useModalOverlay: true, defaultStepOptions: { cancelIcon: { enabled: true }, classes: 'class-1 class-2', scrollTo: { behavior: 'smooth', block: 'center' } } }); tour.addStep({ title: 'Widget Title', text: `Creating a Shepherd tour is easy. Just create a \`Tour\` instance, and add as many steps as you want. <br><br> This is the name of the dashboard.`, attachTo: { element: 'div.transput-caption.editable', on: 'bottom' }, buttons: [ { action() { return this.complete(); }, classes: 'shepherd-button-secondary', text: 'skip' }, { action() { return this.back(); }, classes: 'shepherd-button-secondary', text: 'Back' }, { action() { return this.next(); }, text: 'Next' } ], id: 'creating' }); tour.addStep({ title: 'Adding a widget', text: `Clicking this button will add a widget to the dashboard. Try it.`, attachTo: { element: '.btn.btn--new-widget.js--btn-action.js--btn-new-widget', on: 'bottom' }, advanceOn: '.uc-ok click', buttons: [ { action() { return this.back(); }, classes: 'shepherd-button-secondary', text: 'Back' }, { action() { return this.next(); }, text: 'Next' } ], id: 'creating3' }); tour.addStep({ title: 'Filter', text: `This third step will hightlight your first filter, but if you haven't added one yet it will just center on the screen.`, attachTo: { element: '.ew-item', on: 'bottom' }, buttons: [ { action() { return this.back(); }, classes: 'shepherd-button-secondary', text: 'Back' }, { action() { return this.next(); }, text: 'Next' } ], id: 'creating4' }); tour.start(); After saving that action you should have a button inside a BloX widget, and clicking that should start the tour.Add Non-Repeating Header To List Of Items
Question: How to add a main header row that contains the column title of each row of data? Solution: You can solve it with a widget script, please follow these steps: 1. Add a class to your "title", or the part that you only want to repeat once (in our case it was a column set): { "type": "ColumnSet", "class": "blox-titles", "columns": [ {... } ] } 2. Add the following script in your widget script: widget.on('ready', () => { const items = Array.from($(prism.activeWidget && prism.activeWidget.oid === widget.oid ? '.blox-slides' : `widget[widgetid="${widget.oid}"] .blox-slides`)); items.forEach((item, index) => { if (index > 0) { const title = $(item).find('.blox-titles'); $(item).find('.blox-titles').hide(); } }); }); 3. refresh and it should be working 🙂 Before: After: