/Web-App-Builder-Custom-Widgets

Web App Builder Custom Widgets

Primary LanguageJavaScript

🏥 ICRC Web App Builder Custom Widgets

Web App builder Custom Widget List

.

ICRCFilterHealthActivities Widget :octocat:

Filtering WebMap Layer using Dojo CheckedMultiSelect

.

ICRCFilterMigrantsActivities Widget 🔍

Creating circle graphics and filtering them using Dojo MultiSelect

.

ICRCSustainableDevelopment Widget 🌱

Filtering WebMap Layer using Dojo Select and Bootstrap Toggle

.

IntroJS ft WAB 💫

Why using intro.js?

When new users visit your website or product you should demonstrate your product features using a step-by-step guide. Even when you develop and add a new feature to your product, you should be able to represent them to your users using a user-friendly solution. Intro.js is developed to enable web and mobile developers to create a step-by-step introduction easily.

.

Integration with a Web App Builder app

Add intro.js dependencies How to add other libraries to WAB?

Create the configuration js file and refer to it in the application in the file 'index.html' Explore and get with the console the id/classes names of the containers to which you want to add as a step. Fill the 'intro' and 'position' options:

function getNode(node){
    //Getting ids or classes cleanly
    return document.querySelector(node);
}

function initIntro(){
    introJs().setOptions({
        steps: [{
                intro: "Hello Web App Builder, I'm IntroJS, wanna join me? :)"
            },
            {
                element: getNode('#widgets_Search_Widget_3'),
                intro: "The Search widget enables end users to find locations or search features on the map.",
                position: 'bottom'
            }
            .
            .
            .
        ]
    }).start();
}

Call the 'initIntro' function Simply add a button that calls the function. For example, go to the 'HeaderController' widget:

  • Add the button at the container (Widget.html):
<div class="container-section jimu-float-leading" data-dojo-attach-point="containerNode">
  <div data-dojo-attach-point="executeIntroJS"></div>
</div>
  • Add a new function for contain the button and call it at 'startup' (Widget.js):
startup: function() {
  this.inherited(arguments);
  this.resize();
  setTimeout(lang.hitch(this, this.resize), 100);
  this.IntroJS();
},

IntroJS: function(){
  new Button({
      label: "INTRO JS",
      style: "position:absolute;top:5px;left:400px;",
      onClick: function(){
        initIntro()
      }
  }, this.executeIntroJS).startup();
},