Web AppBuilder for ArcGIS: Customizing and Extending

hi welcome to web builder for arcgis customizing extending my name is Gavin ray Kemper and today with David Martinez we'll be talking about how to customize and extend web app builder with widgets and themes first we'll do an introduction talk a little bit about web app builder then we'll jump into creating a widget we'll go through an example a demo of actually building a real widget then we'll go through themes what they are and kind of some ideas on how to create themes and finally we'll talk about the web a builder community and where you can get more information the idea of web app builder is that you take a GUI builder and combine widgets and themes there are many out-of-the-box but you could create your own custom ones as well and combine those with the stem app which is the core application that was provided with web app builder and you combine them all with configuration file which wraps them in that stem app and gives you a really simple way to build an app that's really easy to generate what that biller has been really popular there are over five hundred twenty-five thousand apps created in ArcGIS online and about a third of those are public what a builder Dell the developer edition is the version that allows you to run web builder on your local computer or server this allows you to develop custom widgets and themes for web app builder the main place in web a builder to customize and extend are the widgets and themes widgets are executed at runtime they should be self-sufficient so you could take your widget and send it to a friend or colleague and they could run the widget in their own web app builder it needs a container and it uses the framework of the container where the theme is applied at runtime and is also self sufficient and distributable but a theme has no container per se it kind of is the container for all the widgets that you'll add to the app so jumping into widgets specifically creating a custom widget uses the same skills that you already have from building JavaScript apps so on the right here is an example of a custom app you might have right now you have some CSS some JavaScript and some HTML markup while those three con are directly present in our concept of web app builder widgets but they're in separate CSS J's and HTML files with web app builder widgets you'll be creating dojo modules that inherit from base widget which is provided in the Jammu library of what that builder this is similar to how in plain dojo apps we inherit from digit dot widget base which provides us the digit lifecycle methods like post create and startup based widget will provide us somewhat at build our specific lifecycle functions that we can use like on open on clothes etc base widget in addition to the lifecycle functions gives you a properties the apps config through this config access to the map object via this tab state events etc so you have access to a lot of stuff your job as the developers to build all these events and things together with a UI with your business logic and workflows and maybe defining out the widget settings and of course making sure any of your UI is properly translated through localization if you need that the structure of what that builder is quite opinionated which is another way of saying that web builder widgets expect certain files to be in certain places this saves you from wasting time having to set up complex configuration files all widgets must have a manifest.json file which tells what that builder about your widget it also must have a widget JS file which is the main entry point that where that builder will use to call your widget everything else here is optional widget dot HTML is your HTML template config dot JSON is the settings of your widget and then there are folders for NLS your translations CSS images and the setting folder is special it's where you can define out the logic and template before your widget settings modal now that I've told you about widget development let's create a widget so today we'll be creating a widget that clips and summarizes a soil layer based on a polygon that the user draws on the map we can start our widget using a variety of methods either creating the files from scratch starting by copying an existing or even using a widget generator which simplifies the process of creating a blank widget for you if you're a bit more advanced and want to learn more about the generator script that will help you set up developer workflows just search on github for arcgis we'll have a builder widget generator for this session we'll start with using an existing widget where that builder comes with a variety of sample widgets here I've got weather builder extracted and if you go to the client folder stem app and then widgets here are a variety of all the you out-of-the-box widgets and if you scroll down to sample widgets here are a bunch of example widgets that you can learn from there's a widget that has all the bells and whistles in the demo folder there's a widget that shows jQuery there's a widget that shows which communication I would recommend taking a look at all these samples because they really tell you a lot about different types of widgets today we'll start with the simple widget so first I'm going to just make a copy of that and name it name the folder the widget name that I want it to be so today we're gonna call it clip summarize now one other thing we want to make sure before we start using this widget is that we want the name in the manifest at Jason to match the folder name that I just created so I'm going to go into this folder open the manifest.json file and make sure that name is the exact same including capitalization so now I've made that I can enable my widget to enable the widget so it's as simple as moving this widget up into the main widgets folder and once you do that it'll immediately be available in why that builder so let's take a look there i've web app builder developer edition running and a basic 2d web application going here so if I go into widgets and select widget I can now see our clip summarize widget shown up it has no configuration since it's just a simple widget and I can open it up and there it says I'm a very simple widget now there are a couple ways to develop the new widget that we just created the simplest way is to load the widget into the web app viewer where we send it config file path as the query parameter and so that's what we'll do today so first I'll copy a config file from the sample configs to the config folder so going back to the web app builder directory I'll go to the client folder this time go to stem app and I'll just copy this config demo from the sample config folder up and over into the config folder I'm going to rename this just config dot JSON to make things easier and then we'll want to load this config file in an app to do that we'll take the basic web app builder URL paste it into a new tab change this from what I'd builder to web app viewer and then say question mark config equals configs slash config dot JSON that's the path that our config is living at within the folder there's no gonna load web app builder based on the contents of that config file so you can see it floating a example web map and loading a bunch of sample widgets we want to change that config file so it loads the web map that we want as well as our widget that we're developing to do that all just double click on the config JSON to edit it I'm going to find first the web map this the item ID and I'm going to paste in the web map ID that I know I want to use next I will change the portal URL and the app ID to make sure that we can log in properly we'll clear out a few things that we don't need like the subtitle and these links and finally we'll scroll all the way to the bottom where we have those five widgets that we're showing up at the top right there's one object here for each of those five widgets I'm going to remove the last four and this one we will call clip summarized the widget that we're creating and then we need to reference the path in the folder directory of where that widget sits so if I save that and switch back to my app I'll refresh and now we can see it's loading our web map and it's loading our widget let's make sure when we make change this widget that's actually being changed in the web app to do that I'm gonna go ahead and open my widget directory in my code editor so to do that I'll go to the widgets directory and don't and drag in the clip summarized folder into my code editor I'll open up all the files on the left-hand side and it'll allow me to easily edit that going forward so right now it says in the widget this is a very simple widget let's just make a very small change here put a few exclamation points when we save it and refresh you should be able to see that change live and if we do that means we're ready to start developing so the first thing we might want to do for our custom widget is at a proper icon I've got an icon here and so I'm gonna go in to my widget directory go into the images folder and just override the icon dot PNG now when i refresh the page we've got a nice customized icon here the next thing we'll want to do is start working with our code and move our HTML into its own HTML file so right now that string of text is right in line in our widget j/s but we can tell whether builder to load this instead from widget not HTML to do that we have to tell whether that builder that we have a widget dot HTML we go to the manifest.json file and go to the has UI file setting set that to true because that's set to true when the builder will automatically look for a file called widget dot HTML so I'll create that file and move the HTML into the new HTML file and get rid of the old template string you with that all set up we'll just refresh our page make sure the widget is still working great so now our HTML is coming from that file next we want to add translations to our widget you might say hey my widget I don't need translations I'm only building it for one language well translations is good to set up in your widget early on because you might translate it in the future but also it provides you a single place to put all your strings that you're using in your widget so it's easy to maintain going forward so it's really important to have this in place similar to before we'll go to our manifest.json file and tell why that builder that we want to use translations that's the has locale setting' will set to true because we have that hassle Cal set to true whether the builder will look for a folder called nls salt create that folder and within that NOS folder it'll look for a file called string CAS so I'll create that now this strings digest needs to be in our particular format I might not have that memorized you might not have that format memorized so this allows me to point it gives me a chance to point out the web builder developer edition documentation that's over at developers Dargis comm / why that builder and if I go into the guide and widget development you'll see a lot of great topics for developing your custom widget including add IAT and support it talks about everything about supporting translations and it gives you a sample structure of this file so I'll just copy and paste that over to here our string we're gonna call description for now and then the text of that description is going to be please start here we're gonna support Spanish so that's gonna be that yes locale and we'll set that to true because we spoke the supporting Spanish web builders automatically gonna look for within the nos folder another folder called that same locale string in this case es with another file string say s this string CAS is going to be similar to the other one except it's only going to have a list of these strings that we're supporting for this particular language and so here in the string such as within the es folder is where we want to put our Spanish translation of that string I have a translation here I can paste in one additional change we need to make is to actually use this description within our widget dot HTML so that web builder will know depending on the language it should either use the default language or one of the translated languages so we'll go to our widget on HTML and just replace our string with dollar sign and LS description now to actually test out these changes we can go over to the web app and add a query string parameter to our URL so we're gonna add ampersand locale equals yes my builder will load the Spanish locale all the out-of-the-box widgets are already translated as you can see there and when I open my widget we can see well the Boehner is automatically swapping out that string to be the Spanish version in this case so our translations are properly working let's switch back to the non translated version by removing that query URL parameter and make sure it's also loading our default language looks great next we want to enable our CSS file CSS allows us to style our widget properly and specifically with CSS rules so switching back to our code I'll go to our widget JS file first I'm gonna remove this extra this extra function that we don't need and I'm going to create a base class here base class is what web builder will automatically add the CS this class this HTML class to wrap our widgets so that we can use now then use this base class in our CSS so that's an important step in enabling our CSS well then go to our manifest.json until why the Builder that we have a style and when we do that whatever builders automatically going to look for a file called style dot CSS in a folder called CSS so create that file right now now I want to target my CSS rule here that I'm going to create specifically to my description line so really quick I'm going to go over to my widget HTML and wrap my div around my description in a do where the class equals description now we can actually use this class in my CSS so we'll say so we'll create a rule that is using our base class that we started with and then more specifically to our description and we'll make it both bold and green so now we're viewing our changes our text is now bold and green so that gives us a CSS file and structure that we can utilize while we're building our widget so one great thing about developing with web builder is that since it's built out on the RGS API for Java Script you can utilize the widgets that are available in that API for example the ArcGIS API for Java Script has a draw widget that you can use right out of the box it allows you to write minimal code and lets the user on the map draw and you as the developer get the geometry and you can do what you need to with it so we want to utilize that functionality within our web app builder app so let's start by adding the draw widget to our widget in our HTML file we'll want to put in a place where the draw widget is going to live so I had that we're adding a div and then a button that we're saying when this button is clicked call a draw click Handler and the text of that button is going to be start draw so let's make sure we put this variable into our string CAS and so that's taken care of now we want to create this function in our widget j s so when I click this button we're gonna log out start draw and then we're going to enable the draw toolbar we need actually need to create an instance of a draw toolbar so to do that we're gonna utilize a lifecycle function of Y builder the post create function so the post create function will get automatically called when our widget is created so here we're going to utilize the draw toolbar from the JavaScript API in order to do that we need to include it using the AMD includes so I've looked up in the documentation the draw toolbar is called is at that location so now we can use this draw module here we're using this dot map which web builder automatically provides and we're also setting up a event on the draw toolbar so that when the person ends the draw it'll call our draw end handler so let's create that here so here's our draw end handler with that all in place let's go check out and when we open our widget we see our start draw button I can click on it draw on the map and if I check out our console you can see that draw end event happened and it's passing the year's geometry so that gives us a great step forward in terms of the functionality of our application so now we actually want to do something with that drawn polygon we want to query the feature layer clip the results using the client-side geometry engine and then display the results in a new graphics layer to fit this all in during the talk I have a few utility functions that are already written that will include those modules at the top of our widget along with the graphics layer so opening our code will go into our widget j/s and include the graphics layer G and the geometry utils and display utils again these two files that were including are my utility font files that you don't have to worry too much about just worry that just understand that the display utils are about displaying in the table and the geometry utils are around that clipping of that data so we want to create a location to store the results table in our HTML so we'll create a div here and we'll name it results div that we can then reference from our JavaScript we then need to create that graphics layer so we'll do that in the post create this is a graphics layer that we will put the result geometries into and then we'll add that to the map we also want to get a reference to the feature layer of the soils that are currently in the map so to do that we're gonna use this dot map which again is provided by web app builder for us that's a reference to the JavaScript API map object we're gonna call the get layer function on it and we're going to just grab the first graphics layer ID so then we can use this dot feature layer layer in a later in our code next we'll update what's going to happen when the person ends finishes drawing and we'll have a show results function so talking through this the draw and handler now not only the activates the draw toolbar but actually uses our geometry utils utility function to query and clip based on the geometry that's coming in and the feature layer of the soils that's going to give us back a layer of graphics that will then call our show results function to show those both on the map and in a table the show results function takes the geometry and all the graphics and calls our display utils to display those in a table and places that table into the results div that you'll remember we created earlier so with all this in place we go back to our app I can open a widget make a quick drawing and I'll see that our draw end happened the dissolve and clip happened and we can see that in the graphics layer on the map we can also see the results in the table over here now this table isn't yet styled so let's add some styles to make that look better we'll go over to our style that CSS that we created earlier and we'll just add some styles to make the swatch a little larger column width etc now we make that drawing our table looks a lot better as summarizing each type of soil and the number of acres that is in that selection for that number of that soil type you might have configuration variables in your widget that you want the user to control when they add their widget to you to their app for our app maybe we want to we want them to enable or disable the showing of that results table that we were just looking at to do this first we tell whether builder that we have a config file and that it should look for the config file when the widget opens we do that in the same way that we've done to before we'll open our manifest.json file will tell why that builder this has config is equal to true now like that builder is automatically gonna look for a file called config dot JSON and in that config JSON will create a Java Script object with a single property called show table and for now we'll set it to true we need to add some logic to our JavaScript file that will actually look at this configure variable and show or hide the table based on that we'll put that in our JavaScript right here we'll say if we have a config file and we have the show table in the config file and it's equal to true only in that case will we actually show our table so to test this out let's go to the config dot JSON set it to false and switch over to our widget we do a drawing the tables not showing so we will now make this config file editable via a new UI using the settings page feature of web app builder let's look at the settings panel right now if we go into the Builder interface of what I Builder and I'll make sure to reload the page to get our latest changes we are had our widget to the app you'll see that the Settings panel by default is just showing the config file that we had before just very ugly and we want to add a nice UI onto it so to do that we'll first go to our manifest.json tell whether that builder that we do have a settings page when we do that weather builders automatically going to look into a folder called setting and it's gonna look for a variety of files called setting j/s setting dot HTML string sass and style dot CSS the setting Jas is almost a mini widget in itself so you can see we're extending from base widget setting in the GMO library of one that builder and the key part is extending these two functions set config and get to config set config is what gets called when the setting widget opens it checks out the passes the config file to you as the developer and then you need to fill in the UI elements based on the config file so in this case we're checking if our show table variable is true or false and then we're setting a check box to be true or false if that's based on that value gate config is what boater calls when the person clicks save it needs to turn all of your UI back into a JSON object and return that so in our case we're just returning show table is equal to the value of our check box we need to actually create that check box over in the HTML file so here we've got a label and then we're creating an input check box and we're giving it a name called show table check box which is what we're using over here when we're referring to that Dom node in the JavaScript file we also need to make sure we're using translations properly so here show table similar to our main widget we'll open our string CAS defined show table to be an actual string so now when we switch back to our web app builder builder interface we'll add the widget to our app now we have a setting show table that's a check box true or false so if I turn that on do a quick drawing will see the table shows up if I turn it off I do a quick drawing see the table doesn't show up that's a nice user interface for your widget users so now that we've written our custom widget we've used the ArcGIS API for JavaScript we've built a UI we've built the Settings panel now we need a nice look and feel to go with our custom widget Dave's gonna talk about themes okay thanks Gavin so now we're gonna switch gears and we're gonna talk about theming so what is theming well they mean is you and in a web app builder we have CSS classes and basically what these classes are they're designed to allow you to create these visual consistent experience across the app and basically allows you to use themes and they're basically classified into four main categories main widget and panel state and icon and you can find them in the Jim UJS CSS Jim you theme dot CSS but let's dive a little more detailed so basically there are four major excuse me basically there are four major pieces that make a web theme they are layout so basically a layout is a list of pre UI components it does positions of widgets panels and other UI elements such as on the map such as the zoom slider the search box the panels of where to place the placements of where to place your widgets and and it also has capabilities to do size of UI elements and then we have a panel so panel is a container of the widgets content it's inside the node panels can be different in terms of features some can be collapsed some could be expanded some can be dragged around an example of this is the foldable theme it has two panels a dockable panel and a foldable panel and you have the option to choose those each theme has its own type of paneling the next thing is style now style defines and look and fill the app including but it's not limited to colors of the header you can also do sidebar panels and other UI elements that exist on there and then the last piece of it is the controller now the controller is in the theme for instance is basically it helps it behaves in different themes and think of it like it's the brain of the whole app it drives the app navigation it defines how twits are opened and closed and communicated and basically controls the app behaves now when we look at web app builder from a UI standpoint the UI is made up of several different components and at the very least we you know we inherit from dojo digits and then from there that in here it's dojo Jetix and then the JavaScript API and then the LabVIEW UI and then Jimmy widgets on there but to give you a little more detail how this works so basically going from top to bottom these are our libraries work in web app builder at the very bottom you have your dojo JIT it's okay and then we inject the JavaScript API widgets that inherits everything coming from the dojo did it and then on top of that the gym you dot CSS and then we do some override to give different looks and fills for those inherited things that we're getting from the API and the digits and then every theme has its own unique styling so basically we could take a theme and then we can override everything that's injected coming from the bottom now remember when I talked about the control or widget it's it's different compared to a functional widget which earlier Gavin was talking about so when we look at the purpose a control or widgets basically displays how the apps information it defines the apps behavior such as interactions workflows etc it decides does a widget exists within a panel does it exist relative to the map and then when you have your functional widget it provides one specific functionality to the app such as the search and then the folder structure it's it's very similar in the manifest which is makes up which we define that it exists makes up the Kara sticks of our app and web that builder the difference between the two is you would declare for a controller you would declare that boolean values are true for a functional it's it's false is it a theme widget control widgets going to be true a functional is going to be false in panel is always going to be false and then the functional widget may vary right because you might have a widget that because it's in panel are relative to the map and then others there's some behaviors that are very similar in that instance now let's go ahead and create a theme from scratch and before I get started one thing I always like to point out is when we're talking about the controller widget in most instances you're going to get by with just doing simple CSS manipulation to kind of skin the theme of what you're looking for so let's go ahead and get into that so the first thing that I want to do is I want to go into my web app builder and I'm gonna have a brand new install of web app builder 2.15 I'm gonna create a theme for a 2d app and let's go ahead and name this theme and while this is creating everything that makes up this application with it so that's injecting all the defaults for this particular theme you're going to notice that in my theme tab I have all these themes here and we have this unique one called dev 17 Quinn Cydonia which was created for this particular presentation so I'm going to go ahead and select this theme now this theme is basically a copy of this foldable theme with some changes I went in there and I ripped out all the multiple layouts I ripped out some of the default styles and I kind of skinned it just for this particular presentation so with the theme itself you're gonna see that there's it's basically it looks like the foldable this default gray background you have these widgets you have this header in here with this hover and basically what I want to do is show you how to apply some simple CSS to change the look and feel of this particular application so the first thing that we're going to do to do this is we're gonna go ahead and open up a visual studio code and we're gonna browse to this default theme folder and our client stem app under themes and basically what I'm gonna go into is we're gonna just for demonstration purposes is just style the default theme which is that great one we're looking at so I'm going to go ahead and go into my style dot CSS which you can see is blank and the first thing that I want to do is I want to override some CSS so we're gonna go ahead and apply some code snippets to basically do some overrides here so first we're gonna go ahead and get rid of the gray background and we're gonna give the GMU main background about a background color of white okay and also what we want to do is we want to change the title of the background to this little subtle dark gray here so I like to format my code comments to bear with me here so if I go ahead and ctrl s to save I'm gonna go back into my browser here and since I'm working in the builder mode what I what I do just this is for demonstration purposes most like you wouldn't do this but I'm gonna select another theme hit save and then I'm gonna go back to my other theme so it changes the state of the application so now you can see I've inherited this white background and you can see now my icons are hidden but don't worry we're going to fix that because we're going to skin this theme to change the look and feel of that so let's go back into Visual Studio code and we're going to override some of the default widgets there on the map so we're gonna override the location and we're gonna override the zoom slider here and basically we're going to say my location the zoom slider all these widgets are on the map we're gonna change the background color to this blue here and then we're gonna give it opacity of nine so we'll hit control save here go back into our application we'll choose another thing in here and hit save so it inherits the new state now you can see this has changed here one thing I want to do is I don't like this icon here it's inheriting from our org so let me go back to my theme alright so here you can see the themes coming alive we're changing the styling Cara sticks here so if we go back into our theme here the next thing I want to do is I want to override the widget header here I want to change the styling of this button here to give it a more-- what I would say material design works more rounded in this particular instance I want to move this border here so and then I want to override some some some paneling stuff in the the CSS so what I'm going to do is import some snippets to make this happen so here we go we're gonna let me just highlight this real quick and I'll tell you what's happening here because I just like to format this code don't worry this is just all simple CSS to make this widget header over right so if I get to the top of this what will go through this real quick so let me just format this code here so basically what we're doing here is we're wrapping the widget header controller we're getting rid of the box shadow we're doing a border bottom three pixels at this color to match or other color for the icon node here we're gonna have the same background color the heights gonna be 30 pix and then we're going to define some margin on here where we want it placed in there and then for the the image itself that's gonna house the selection of the widget inside the header controller we're gonna make sure that's at 14 pixels and then we want to apply some state selections so when the user hovers over and select something that's going to match our theme so that background color is going to go to blue and then for anything that's considered into a a header and it's going to be inside a that drop-down we're gonna push this to a triangle and we're going to change its header controller so if you're gonna group widgets together and this is the same here that's going to equal 14 pics to make sure it matches other theme and Kara sticks up above and then for the visited links this will be this default of this like right here and then more icon cover the background will be this three two three two three two that's basically matching ours as we continue down or these are just other areas and then it for the pop-up itself we want to make sure the pop-up matches our theme so basically we're just doing some overrides here on clothes and inner and then here what we're doing is if the pop up selected we're changing the the background color and then on the widget screen panel so when the user clicks a panel we want that panel to align the same and inherit the same color theming of our new theme which is this this dev one it's going to match it's going to take that foldable panel title and the title panel and it's gonna give it that background color here and then basically any pop-up that we get for the title pane in the pop-up is going to inherit that background color to match everything okay so now what we want to do is let's go ahead and hit control save and now what I want to do is I basically know that we have changed this let me select a new theme here and let's go back to our dev some of the theme you're gonna see that this is all changed here we have this border here this 3 ik 3 3 pixels I want to change the look and feel of this particular widget that's inside this header controller right now we have what just a default font we have a default state over when we hover over the search and then we have this rounded radius edge here okay I want to blend this more into this header controller because I think it would look better if I don't have these borders and I and I want to change the text to let's match the blue thing for instance so if I go back into my visual studio code here the last step to make this happen is I'm going to go ahead and import this gym you widget search here and basically what we're gonna do here is override the search our GS search which is the widget right so which is part of the Jimmy widget search we're gonna override the search button we're gonna define a padding of six pixels we don't want a border here and then with the search button hover and on focus we're gonna give it a white background CRO we're gonna do a background color of white because right now is great and then the color over will be that blue okay and then for when users type in the input of the search widget we want to give it a color of this blue color to match our theme the font side is gonna be 14 pics and then we want a border of none so let's go ahead and hit save and we're gonna go back into our theme here and let's go ahead and save here and select so now as you can see we got rid of our border here and if I type it in here it's a blue font if I do a hover right it's blue here to match that you could argue we could price change the clear research too but you could see this state has changed here so now that's a simple way of what majority of you know our customers are doing as far as overriding the themes you could do some simple CSS modifications to really change the look and feel of your theme so if I was ready I could save this and then launch it and then I could if I wanted to I can have other applications use that as part of my org if I had saved and I can export that as a template and then published as a template and any new applications that are built within web app builder can take advantage of using my theme the only caveat is that theme is going to be hosted on some some web server that your org can get that template and then it references all the JSON that makes up that theme and then anyone can use it from there if I go export template here you get to find what parameters are acceptable as far as what you want configurable parameters for that and if I export to my organization you can say okay this is my dev summit 20 team you give it a tag here and you gave us tags and descriptions you could save it to a theme folder and hit OK and then now you could see that it's exceed our mission to share the template that's something you got to get as part of your org but basically you have the correct permissions you put that in something something like the gallery your users can take advantage of that template okay so let's go back into my presentation here okay so we created a theme so now let's talk about community because let's face it we need resources to make sure we're successful and why not leverage the community at hand that we have with this part of web better it's one of the most popular what most popular communities we have and if you're looking for help you can find information not only in the online help documentation but also in the developer edition help doc and I think more importantly is the web app builder community people are very generous in answering questions pretty quickly and our team monitors as well and we're also going to be providing the slides and code from this presentation from the theme that I created but also from the custom widget that Gavin created in this URL here and other resources that are really helpful is our solution team creates widgets that are specific towards certain verticals and they published those as open source and then we have a list of widgets on Ezra github for custom widgets and this example widgets and themes shown today will need to update this slide here so this is on the previous slide so let's fix that real quick so I'm going to exit out here and we'll do this over again save okay so let's talk about other online resources well our ESRI solutions widget team they publish widgets that are that are developed for specific verticals the third that they're solving in the industry they have those is open source you could find those there and then we have a list of widgets as part of this repo here that that are there to help you get started and with that Gavin I would like to include and say thank you for taking part of this presentation and hopefully we you've learned something new and if you guys have any questions feel free feel free to reach out to us on the community and we'll certainly answer this for you take care bye

Channel: Esri Events

Views: 8,846

Rating: 5 out of 5

Keywords: Esri, ArcGIS, GIS, Esri Events, Geographic Information System

Id: M6-ijfr8ods

Length: 51min 12sec (3072 seconds)

Published: Sat Apr 25 2020