Web App Builder Custom Widgets

I need some caffeine to work :)

---

My other side: I'm electronic music producer 🎹

I really enjoy everything related to synthesizers and drum machines. I like dark electronics 🖤 (EBM, dark wave) the most, but also techno

You can also support me in:

• Instagram
• Soundcloud

---

Adrián Pérez Beneito Web App builder Custom Widget List

• Bar Chart Cedar
• Intro.js
• Heat Map
• ChartJS
• Buffer
• Select by Attributes

Bar Chart Cedar 📊 live demo

See Cedar.js and how to create charts using ArcGIS Geoservices. Pre-coded Web App Builder 2.6 Chart Widget doesn't allow you to create charts on the fly. You can select the available layers in the Web Map. Choose, for the 'x' axis, the field you want to show information, repeat the procedure for the 'y' axis. Select the type of graphic, bars or horizontal bars. The widget is ready to filter the data by extension (by activating the check button). Inside the container of the widget, the graphic will be updated being this responsive.

Don't forget to add the Cedar dependencies. How to add other libraries to WAB?

Version 1.2, pending improvements. All suggestions for improvement will be welcome.

List of the latest enhancements and changes:

• Added a new class => select the layers ids from the Web Map (Dojo Select)
• Added geometry icon; geometry selector (now => "*")

---

IntroJS ft WAB 💫 live demo

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 ids of the containers to which you want to add as a step. Whether the container doesn't have the 'id' property, get it with 'settingid' -element: getNode('[settingid="widgets_LayerList_Widget_19"]'), position: 'left'- (e.g. the header widgets). Fill the 'intro' and 'position' options:

const getNode = node => document.querySelector(node);

const 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">
    <button data-dojo-attach-point="executeIntroJS" type="button"></button>
</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: () => {
        initIntro();
      }
  }, this.executeIntroJS).startup();
},

---

Heat Map WAB 2.7 🔥 live demo

Using ArcGIS API for JavaScript 3.23 for create a Heat Map in WAB 2.7

The HeatmapRenderer renders feature layer point data into a raster visualization that emphasizes areas of higher density or weighted values. This renderer uses a Gaussian Blur technique to average the influence of each point out over the area determined by the 'blurRadius' (the radius (in pixels) of the circle over which the majority of each point's value is spread out.). A Gaussian blur uses a Gaussian, or Normal, distribution (also called a Bell-curve) to spread value out in vertical and horizontal directions.

Using HeatMap Widget

• Select a layer (it needs point type; the widget is already prepared for filter the layers and get 'point' layers)
• Select a field (numeric -short, float, etc-)
• Slider: select 'Blur Radius' (The radius -in pixels- of the circle over which the majority of each point's value is spread out)
• Slider: select 'Max Value' (The pixel intensity value which is assigned the final color in the color ramp. Values above this number will also be assigned the final color ramp color)
• Slider: select 'Min Value' (The pixel intensity value which is assigned the initial color in the color ramp. Values below this number will also be assigned the initial color ramp color)
• Draw Tools: Generate the map by spatially delimiting the result using drawing tools
• Heat Map Slider: (A widget to assist in obtaining values for managing and setting properties on a HeatmapRenderer)
• Drawing Tools: Create a HeatMap using drawing tools as a spatial delimiter. Options => Polygon, Freehand Polygon, Circle, Ellipse, Rectangle

---

ChartJS Widget 📈 live demo

Using ChartJS for create charts using your GeoServices

Chart.js is a community maintained open-source library that helps you easily visualize data using JavaScript. ChartJS is simple and clean HTML5 based JavaScript charts. Display line and bar charts using your GeoServices.

Integration with a Web App Builder app

Add ChartJS dependencies How to add other libraries to WAB?

Using Chart Widget

• Select a layer
• Select a field for 'x' axis
• Select a field for 'y' axis
• Click 'Execute' button
• Click on the tabs to switch the chart. Both graphics will be executed automatically. These will be filtered every time the map extension changes

---

Buffer Widget 🔴 live demo

Using Turf.js. Advanced geospatial analysis for browsers and Node.js

Turf is a JavaScript library for spatial analysis. It includes traditional spatial operations, helper functions for creating GeoJSON data, and data classification and statistics tools. Turf can be added to your website as a client-side plugin, or you can run Turf server-side with Node.js.

Integration with a Web App Builder app

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

Using Buffer Widget

• Select the distance unit
• Pick on the map or input the coordinates
• Select the distance
• Intersection selection available. Select a layer and enable or disable the selection. Click the 'Execute' button

---

Select by Attributes Widget 💠 live demo

Usage

This WAB widget copies part of the functionality of the famous 'Select by Attributes' of ArcMap.

'Select By Attributes allows you to provide a SQL query expression that is used to select features that match the selection criteria.' Follow Esri's instructions here