Web AppBuilder Custom Widgets
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:
Adrián Pérez Beneito Web App builder Custom Widget List
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:
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.
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:
<div class="container-section jimu-float-leading" data-dojo-attach-point="containerNode">
<button data-dojo-attach-point="executeIntroJS" type="button"></button>
</div>
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();
},
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.
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.
Add ChartJS dependencies How to add other libraries to WAB?
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.
Add Turf.js dependencies How to add other libraries to WAB?
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