Web AppBuilder for ArcGIS: Customizing and Extending

so welcome to customize an extending web app builder my name is David Martinez and this is my colleague Gavin and today we're gonna talk about customizing extending and we'll share a little bit dan will go to the session before web by builder what's new and what's coming at four o'clock some okay so we'll share some information about what's coming in the future a little bit of information so today we're gonna talk about we'll have an introduction to web app builder we'll keep it keep it short and sweet but I always like to start off with an intro Gavin's gonna talk about creating the widget right so we're gonna dive into some code I'm gonna dive into some code for theme basically mainly CSS they're going to talk about you know how do we be successful in this right so that's with lab communities getting help seeking answers ask some questions interacting then we're going to talk about what's coming and then we'll have some questions for QA fair enough okay all right so let's get started okay so what is web app builder today right well it's it's for building web apps for your organization right and it uses our JavaScript API and actually uses two versions for 2d apps it uses 3x API for 3d acts that uses 4x api's right so if you're if you're programming one and the other yet you got to write to that specific API because you can't combine them but don't worry we're gonna fix that we'll share those news is later with you but basically we use our JavaScript API to inherit all those dependencies to build what a peddler and we use some of the the JavaScript API to build the GUI interface so you can build widgets you can build themes right you can obviously take source code from other different widgets that may be built in JavaScript encapsulate those and bring those in and most importantly it's a responsive app so you got to worry about building in a breakpoint at 568 to handle one so and shrinks of screen size we built in that responsiveness into that so let's look at you know building an app right and what web app builders made of so we have a GUI builder right and basically that's our builder interface and then what we do is we car widgets okay so those are our worker bees which are functions our logic and then basically grab those widgets we grab a theme okay that theme is a brand of your application we grab the stamp right we grab all those components and then we storm in this thing called a config file so the config file is basically everything that makes up that web app builder application in references those endpoints for that and then voila it's magic you have an app right it's good for rapid application development good for you know fast applications where you don't want to have the right code from scratch so web app builder does have a great development framework to do that and in fact it's one of our most popular API DPI's most popular I would say configurable applications builders storymap is number one as far as sheer volume of what people are creating but I took this last week so we have a we have like a like a dashboard then we have internal at ESRI and I can look at how many apps are built with web app builder and this is basically taking last I think was last Wednesday we had 460 1533 apps pretty pretty popular right considering released this a couple years ago more than a couple but it's by far very popular and these are just this is just online this is an include portal so 30 33 % of these public apps 38% are private 15% are shared and then a 14% I'm extending accounts okay this is very popular and what we're going to talk about today here is the developer edition and the reason why is we're all developers and it's really the developer desert as does the heavy lifting you know we do have three versions of web app builder once an online that's WYSIWYG right what you see is what you get we have an enterprise builder as well for that we enterprise but we have one for enterprise right and that's for widgets and such and then the one that's really that you can tinker with and get everything done with and do themes and widgets is the web app builder division so I just want to make that clear distinction that that's what we're going to talk about today okay so at the very core of it when you're if you're just diving into web app builder or you just need a refresher is you're gonna be dealing with widgets and themes and it's pretty it's pretty consistent when you're developing with both you know for widget execute that you know runtime its configuring so it doesn't mean that's not copy and paste it's self sufficient and distributable so me and my colleague can share information we can run multiples you know code projects share widgets etc it needs a container there's no coding block and best of all has a programming framework right of a container and the same thing with theme you're going to see a lot of kids to see here it's applied at runtime it's configure in not modified CSS needs a container self-sufficient and distributor and distributable and it has a programming framework okay pretty consistent so just think about that because if you develop widgets you can pretty much develop things too and that's kind of what we built it for is we we I know that 98% of its today okay right how many you're doing themes that's a couple right so couple so that's so what what I'm here today his to talk about is giving that confidence to develop themes because what we don't want is when we created this we gave you the OtterBox themes but you know what happens is we get comfortable and we create themes and then you have applications that look the same across many different organizations but you can take themes and really give it your own brand of what you want it to look like right so so that's kind of what I wanted to kind of illustrate today widgets you could do obviously the same as well majority it works probably widgets because that's the function logic of your app okay so better yet as opposed to me talking let's get into widget development and they I'm gonna hand it back over to me for themes all right so you're on three mister give yep okay all right so you have a crew so creating a custom widget is what we'll talk about now which she actually uses the same skills that most of us probably in this room already have from building playing JavaScript apps so right here I have an example of maybe a typical single page JavaScript app you you might have you have some CSS at the top you have some JavaScript in the middle and an HTML template at the bottom well our concept of web app builder widgets follow that same pattern we just separate those sections out into a widget not CSS file a dot a JavaScript file and an HTML file with web app builder widgets you'll be creating dojo modules that inherit from base widget which is provided by the Jimmy library of web app builder so this is similar to how plain dojo apps for those of you who are familiar with that inherit from widget base which provides the digit lifecycle methods like post create and startup base widget will provide us with some of the web app builder specific lifecycle functions that we can use like on open on clothes and those are again functions that will automatically get called that we can put our own code in that will get called by web app builder at certain times so basically JIT in addition to those lifecycle methods that I was just talking about gives you at properties it gives you the apps config through this config it gives you access to the map object using through this dot map and gives you state events and so on so you have access to a lot of stuff and that's the idea that without builder brings teet brings to your development process and so you can focus on your job as the developer to build all these events and things together into your UI with your business logic and your workflows and maybe defining out the widget settings and of course making sure your UI is properly translated through localization if you need that the structure of web app builder is quite opinionated which is another way of saying that web app builder expects certain files to be in certain places this saves you wasting time having to set up complex configuration files all widgets must have a manifest.json file which tells web app builder about your widget and it must have a widget JS file which is the main entry point that web app builder will use to call your widget everything else up here is optional widget dot HTML is the HTML template config con can store some settings of your widget if you if you'd like there are folders for NLS which are translations CSS for your Styles images and so on the setting folder is special it's where you can define out the logic and template for your widget setting modal which is just kind of an example one is shown right here it's almost like a mini widget in itself it's where you build the user interface that your for your users who are actually creating apps to be able to configure your widget that you're creating so you'll have a JavaScript file an HTML template file and just like custom widgets you can have localization and translation yep so now that I've told you a little bit about widget development let's create an actual widget so today we'll be creating a widget that searches the Flickr API to find photos near an address that you type in we can start out a new widget using a variety of methods either creating the files from scratch with which sounds a lot of like a lot of work to me copying an existing widget and modifying it or even using a widget generator which simplifies the process of creating a blank widget for you and if you'd like just a quick plug there a quick if you'd like more information on that winter widget generator process we're going to talk about that in the web app builder for RTS advanced development tools and techniques talk on Thursday so but for today we'll go ahead and start with a sample widget I need to close my teams so I've already got web app builder running here and I've created a simple app and we want to create a simple widget and we'll so we'll start by I said going into the web app builder files so those are here let me magnify it a little bit so here are the web app builder files when you download web builder from developers to Eric just calm and unzip the zip file you'll you'll get something like this and I think most of us in here probably run web app builder already to get to the widgets repository you'll go into this client folder and we'll go into the stem app folder since we're working with a 2d app and then we click this widgets folder and here is a list of all of the out-of-the-box widgets and it actually adds all the code for each of these widgets which as a side note is a really good resource for you to learn about widget development if you want to say well how does the draw widget work you can just go in here and take a look at how that code works but today we'll start with we'll go to one of these a special folder in here it's called sample widgets and in this folder we have a variety of example or sample widgets that come with web app builder that you can use to kind of start with or see how certain things work so today we'll start with this simple widget which is basically a bare-bones widget that has the minimum amount of stuff there I'm gonna create a copy of this folder by just pasting it in place and I'm gonna rename my widget in two locations in both locations that has to be exactly the same so the first location is just gonna be this folder name so I'm going to call our widget Flickr and then I'm going to go into that folder and open up the manifest.json file in the manifest.json file we want to make sure that our that the name is the exact same name as the name we just used on our folder can you all see the code in the back oh good yep okay so in here I'm also gonna name that Flickr this manifest.json file has all the settings or all the metadata for our widgets so you can set the rest of these properties if you'd like so you can put in your name you can put in this description of what your widget wants to be and this property section is really really important and we'll come back to that later but for now I'm just going to change the name and save it I'm gonna go back to my Windows Explorer and go to that folder the Flickr folder that I just created I'm gonna move it up a level into the proper widgets folder that's all I really have to do to enable this widget so if I go over to my web app builder that's running and I go into the Builder interface and if I go into the widgets panel and go to add a new widget we'll see that my Flickr widget is already listed there so that's really all I needed to do to get going on my custom widget of course this custom widget is not really doing much right now it's just a copy of this simple widget which just has some text in it and a single button but at least we're kind of on the right track to creating our custom widget now now actually developing this custom widget we don't want to actually use this builder interface to develop because when you're when you're creating your custom widget and you're creating your app and actually behind the scenes as copying your widget to different places and so for actual development we want to use this paradigm of the web app viewer where we can send in a config file as a file path into the query parameter and that's kind of what we'll do today to do development so to get that all set up I'm gonna go back into my web app builder files where I just was and I'll go up to the stem app folder and with web builder a sample config comes along with it so I'm gonna go into the sample config file and just copy this JSON file into the config file so pretty simple again just copying a font that file from the sample configs into this config folder I'm also going to rename it - just config that JSON and I'll open it up this like I mentioned is a JSON representation of an app and so all of the settings for an app including the web map ID that we're using are in here so to view the app that this this config file is based on I'm gonna go to my browser and instead of having the default web app builder URL which is what opened automatically when I ran the star up top bat I'm gonna change this to slash web app viewer and then I'm gonna add a query parameter a question mark config equals and then the path to where I have my config file so I stored it in the config folder and I called it config dot JSON so let me zoom in a little bit on that so that's kind of the path and this is all documented on the web app builder documentation pages but yeah so that's kind of how you do it when I run that it's going to open up the web app builder viewer and it's gonna use my app based on that JSON file that I had open so to setup my development environment I want to update the web map ID that that my app is based on so I'll grab that and I want to update the widgets so if you saw in the app we've got five widgets at the top right instead of those five widgets I want to load my own widget so I'm going to delete the last four widgets and now we've got just a single widget that's being loaded I'm gonna change it to load mine that we've got the name here and then the URI is actually the path to the widget so it's going to be in the widgets folder we called our name our widget Flickr and then slash widget is just a reference to the widget J's file so after I save all that and refresh we'll see our it's now using our proper web map and then in the top right hand corner I can see my Flickr widget is being loaded and the most important part about this is that I know that it's loading my Flickr widget specifically from the stem app widgets folder and this is where I'll do all my development from so I cat this point I can actually go ahead and go into my stem app widgets folder and I should have my Flickr file in here well actually I'll just drag it so I'll just create and drag my Flickr or folder into here and now I've got it open for development I can make a slight modification here just to maybe add some exclamation points just to make sure that to prove to myself that when I make a change to the code I'm gonna see that change in the app and there we have those exclamation points so at this point I'm kind of good to go to do some real development I've got my development environment all set up so the next few steps we're gonna get into yeah doing some actual development so I first want to do add an icon which is kind of one of those minor things but I've got this book icon up here and it's not the proper thing so I want to actually just grab that an icon here and over override it in the images folder it's just always going to be named icon dot PNG and it's just going to be a simple PNG that web builder will load automatically so now when i refresh I've got my proper Flickr icon up there and we're good to go there taking a look at our widget J's file again this is the widget Jay has found that we got from that sample widget we've got a template string in lime here in the JavaScript file and so that's gonna be the first thing I'm gonna change instead of having my HTML template in line I want to separate that out into a separate HTML file to keep things kind of separated and modular to do that I need to tell web app builder that I want to use a template file and that to do that I go to my manifest.json file that's where we're getting to what I mentioned earlier these properties the property that we want to enable here is has UI file and when I set this to true that's telling what app builder to instead of getting my template from the JavaScript file go ahead and look for a file called widget HTML so I have to create that obviously I'll create widget dot HTML and let's go ahead and move that HTML over I'll just copy and paste it here so if I've done everything right nothing should really change but I actually want to make sure things are changing so I'm gonna add some make a small small change this HTML and I can actually totally remove this template string variable from my javascript file [Music] now when I reload the page I should see the those minor changes that I made to the widget those dashes and there we go so that's our first step kind of completed next I want to add some translations and you might be saying why do we need to add translations I don't even want to add I don't even need to translate my widget well there's two ideas there one is that you might want to translate it later and it's much easier to set up the translations now than having to go back and do it after the fact but number two it's even if you're never gonna translate your widget it's just good practice to have all the the static strings that your widget are using in one place so I'd recommend to do this on all your widgets to do that we're going to go into our manifest.json file again and for the has locale property I'm gonna set that to true similar to before when I set this to true that's telling what that builder - go ahead and look for a translation and in this case it's gonna be a folder called nos so I'll create that nos folder and within the nos folder it's looking for a file called strings j/s now in here we're just going to put a list of variables and then the strings that web builder is going to automatically insert into our widget for us to get that to get that structure you can get it on the documentation pages but I've also got it here so just for just for speed I'm gonna grab this over here and we've got so you'll see it's it's a it's a kind of JavaScript JSON based structure with a variable in this case we've got a description and then a string so we need to use this description actually in our HTML to do that you use this you use this kind of token syntax with the dollar sign and then curly bracket and you say NOS dot and then whatever you whatever name you gave it in your strings JS file so because i've set up that setting in my manifest.json file web that builder will automatically replace that that token that I have in my HTML file with the proper proper translated string so in this case it says please search for a location now to do proper translations you also go to that string CAS file and you just add a you add a locale string and say that it's true for every language that you want to support so in this case we're supporting Spanish which is es little look how string es and we just say true 11 builders automatically going to look for a folder with that same locale string within your NLS folder so I'll create that new folder called es and within that es folder and create another string say s this string CS is going to be very similar to the previous one but instead of the list of languages that we support it's only going to store the variables and here's the translated string we can actually test this with a variety of methods you can either either change the locale setting of your browser or you can add ampersand locale equals es on to your the end of your URL and that's gonna automatically test it as if this browser was in the spanish locale and we can see that my widget is automatically being translated by web app builder sorry that's probably pretty small I'll zoom in a little bit so that's how to do translations next let's add some CSS with web app builder widgets you want to make sure you're always properly scoping your CSS so this is a page of you don't know how many widgets are gonna be on in your application so you want to make sure your your Styles if you say hey my text color is going to be read in my widget that you're not accidentally making the text color of some other widget red and to do that we call we call that scoping your CSS the first step to scope your CSS is to make sure you add a base class Y builder supports this through a simple variable called base class and you can give it whatever you want will cause flicker or search and when I do this whatever builder is automatically gonna wrap my widget code in a class an HTML class for Flickr search and then I'd simply use this string before all of my styles that I implement for web app builder will automatically load my styles I need to go to can anyone guess it manifesto JSON you has style yep so I'm gonna set that to true and since I set that to true why that builder is going to look for my styles in a particular location specifically it's gonna look for a new folder called CSS and it's gonna look for a file called style dot CSS and then then in here is where we want to scope all our styles so I'm going to start every single one of my CSS rules with dots flicker search and I need to maybe make a class called a title and I'll make my text bold so font-weight:bold and make the size a little bit bigger - so like 18 pixels so now I'm working on a div with the the class title so let me go into my HTML file and actually wrap my description in a div with a class of title and so after I do this in our widget will now have those Styles being applied and because I've properly scoped my CSS rules I know that the styles are only being applied in my widget so I'm good to go I'm being a good citizen of my web app one of the great things about moving on it next to past CSS moving one of the great things about developing with web app builder is that since it's built on the ArcGIS API for JavaScript you can utilize widgets that are available in that API and it's kind of confusing people get confused of what web app builder widgets versus JavaScript API widgets they're both kind of use the word widgets but the in the JavaScript API it has widgets itself in fact it has a location search widget that we're going to use today out-of-the-box it does geocoding it has autocomplete wired up and we want our users to be able to search our locations so it makes sense for us just to utilize that so to utilize that we need to add a div where we're gonna put that search box into so I'll say div data at a point is going to be and then we're gonna give it a name like search node and this data dojo attached point might seem like a weird syntax but that's basically the dojo way to name domnode so in my JavaScript I can use this search node now in pretty much anywhere I want to use that so now in our widget ojs we're gonna load the search widget from the jsapi that's gonna be as recession digit slash search and we'll name it search and so you don't have to watch me type out a bunch of code I'll copy this in [Music] so we're gonna use there's a lot happening in this code even though I didn't add too much the first thing is that we're using one of those life cycle methods as I have mentioned earlier and this fad this one this case post create post create is going to be run when the widget is created and so this code is automatically gonna get run we're creating a new instance of the search widget from the JavaScript API and we're passing it our map this dot map if you remember from what I mentioned earlier is provided by web app builder because we're extending from base widget so this dot map is a reference to the JavaScript API map object we're also giving it our search node which you'll remember I just named using data dojo attached point and then we're starting it up I think that's all I need to do to get it working let's refresh the page here and we've got our search and maybe I can search Palm Springs and it's Auto completing using the ESRI geo coder ended even zooms in the map so that's a ton of functionality that we got just by leaning on the ArcGIS API for JavaScript so I highly encourage you all to do that in your own widgets as well so let's actually add the Flickr search so after someone does a search we want to find some photos near that location well to do that we need to allow the storing of our Flickr API key and the web app builder settings or config file is a perfect way to do that so to enable the usage of the config file I'm gonna go to our manifest.json file enable has config and when I enable this web app builder is automatically gonna look for a file called config dot JSON at the top level of my widget there's gonna be just a JSON object and I'll call it can be as many key value pairs as you want so I'll call mine API key and then you can set a value these are values that will be able to be set through the settings panel later but for now we're just going to set it manually for our development so there's my Flickr API key no one's steal that honor system here so that that's there and now that's gonna be automatically loaded into my widget on this dot config so I can now utilize that and similar to before I'm not gonna type in all this codes let me copy a couple files here so I've got this file called Flickr j/s Flickr jeaious is kind of an API module that will allow us to use the Flickr API a little bit easier and then we're also going to add a block of code to do our Flickr search so in our widget J's file when the widget is started up we want to create a new instance of this this Flickr module and we need to include it at the top so I've included our Flickr module which I'm not even really going to show this I mean here's the code and you guys will be able to see the code but you don't have to worry about it too much just assume that there's a bunch of code that that helps us with making API calls to Flickr so when the widget is started up we'll create a new instance of the Flickr module and here is the key that we're passing this config a P I key and that's getting it from that config JSON file then when we do a search when we get a result we're gonna call this show images function and I'll just copy this in here the show images function is going to take the point of the of the location that the person searched for and it's going to call our this our Flickr module calling the get images function passing that point and then it's just going to get back all those images and through all the images and show them inside our widget you don't have to worry too much about this code it's just basically grabbing all the images and putting them into putting to our widget so now I think that's all I need to do let's try it out oh yeah I did forget one things one more fun so in our HTML location we need to create a place where to put the put the images into so I'm going to do a similar thing to before data dojo attach point and I'm going to name it image node so back here in our code just pointing this out here's the image node now to append so we're utilizing that data dojo attached point thing again to place the images into this div so now I think it should work when you try it out search Palm Springs it's going to take that location that we just searched for hit the Flickr API and now we've got a bunch of images that are near this location I want to go up again so so yeah those so that's it's basically working and that's very great but we're all GIS developers here all these images have an actual location and how can we see that well maybe it might we might want to like maybe add a hover on each of these images to show the actual location of that so how would we do that let's add in a some JavaScript first thing we want to do is add the graphic add graphic to our includes so ESRI slash graphic is going to allow us to place a graphic into the map when we hover over the photo and then in our code we'll add a new function called show image on map which is actually going to [Music] so this function is going to take in a point and get the photo location for a particular photo create a new graphic using the JavaScript API we should all be familiar with that passing the geometry obviously and then a symbol and then we're just adding it to our we're clearing out the map graphics so the previous one is gonna be hidden and then we add our graphic to the map graphics we'll add the reference to this function right here we'll say when our image is hovered over on mouse mouse over we'll call our function and so now I can search for any location and when I maybe zoom in I do not know where I searched but so now when I search I've got all these photos and I can actually see where they were taken as I hover over we can see that area popping over great so now we've got a widget working pretty well just a couple more things we want to do we want at our settings page so that instead of having to go into this config JSON file manually and at our API key we want the person who's adding our widget to our app to be able to set their own API key to do that we use the settings functionality so in our manifest.json our last property that we haven't touched today has setting page I'm gonna set that to true and because I've set that to true why that builder is going to look for a folder called setting and in the interest of time I'm just gonna go ahead and copy that over [Music] so now we've got this setting folder and like I said earlier it's really like a mini widget so we've got our settings HTML which is going to be a label and then just a text input a setting j/s which is going to instead of extent from base widget it extends from base widget setting and it basically has two functions that are important set config which basically takes the config JSON file that's stored and populates the form and then get config is basically the reverse it will when the person click Save it'll call get weather builder will call get config which will grab all the values from the form and return back our JSON which what that builder will then save as the config JSON to test this obviously we can't be in our test application here so I'll switch back to the builder interface and let me say remove our previous version refresh and now when I go to my widget and I add my Flickr widget we'll see that we actually have a settings page unlike we did before we can save that our API key maybe if you put in a value here we can double check to make sure when we go in to modify this there it's been saved so that's kind of how the settings page works and the very last thing we wanted to do is touch on feature actions feature actions are just what they sound like when you actually click on a point in the map you have this ability to do some actions based on that feature that you clicked on it's under this little 3 3 dot drop-down and the default ones for web app builder are kind of panned to or add to marker there's kind of generic things that everyone might want to do but your widget can actually add a feature action to this drop-down and so I wanted to show how to do that the first thing like is a very common theme today is we're going go to our manifest.json to enable it this time we're actually going to add some code to the manifest.json we're gonna add a property called feature actions and that feature actions is going to be an array of objects each object representing a feature action that your web app builder widget is supporting it's gonna be a name and then a URI is going to be the actual name of the file that what I builder is gonna run for this feature action so I'll go ahead and create a new file just with that same name of my URI and then the feature action code I'm gonna grab that so here's what a feature action code looks like and I'm kind of running out of time here so I'm just gonna talk through it but it similar to the settings there's two important functions is feature supported gets called by web app builder automatically to see if they should add your feature action to that drop-down so basically our code here is just saying if it's a point we want our feature action to be shown and on execute is what gets called when someone clicks on your feet direction in this case the code that we're running is just using widget manager to first open our widget and then after that happens we're calling the show images function which if you remember from our JavaScript actually is what you know calls the Flickr API and shows all the images so where we really aren't having a ton of code we all have to write a ton of code in order to support this feature action so now when I reload when I click on any of these points I should now have a drop down which I see I have on my feature action but it says undefined that's because I forgot to add the name of my feature action to the Nos the nos translation files is where we need to get our feature action name from so I'll add that here the format of this is basically just underscore feature action underscore and then the name of your feature action so in our case we called it get images and we can call it what we want the nice thing about it being in the nos that you can obviously properly translate it for different languages so now when I reload and click on one of these points there's our feature action with get images I can click on it it's gonna open our widget and of course there's a wholesome listen for those there we go so so there's our Flickr images so now we have a really successful complete widget that has basically all the features that you could possibly add and now Dave's gonna talk about themes okay alright so we're gonna do rapid learning here okay so let's talk about themes so what is the theme so theme is you write think of it as your brand of your application right the look and feel that UI but before there's there's four major components in a theme so let's go through those pretty quickly so the first is layout you guess it's allowed the positions of your widgets you know relative to the map in the browser right where everything is placed how many layouts do you have in the theme three or four you can have two it's totally up to you there's always a default and then you have that's our layout there right so there's positions at widgets etc now we have panels panels can be dockable they can be floatable right you can drag them drop them basically their container right so okay in the Nexus style so Styles can be the color scheme of that particular header controller it could be the CSS etc that makes up that carest except those different and then what we have is our controller think of that it's the master brainchild of how your app behaves right so you have like dart controllers header controllers and basically houses the container of those widgets so think about behavior okay but to better understand what makes up the web UI it's probably good to give you a good illustration is so we riously basically inherit dojo digits right those are digits become art API for widgets and then we have our gym you classes which are basically gym you Bridget's and then we have the web UI right but to look at lists and a layer approach right going from bottom to top we have dojo digits right that we bring in to largest API for JavaScript which we inherit as read CSS then we override that with Jim you dot CSS and then everything can overwrite the bottom okay so you can really get stylistic on and doing these different type of themes okay so then you have comparing like a functional widget versus a controller widget the purpose of the controller which is to place app information behavior how it interacts and work or close the functional widget like what Gavin's was basically one specific functionality of the app form fill occur search show me image folder structure is very similar it's the same folder structure with widgets and themes too and the basically you're doing a controller would you do is in controller widget equals true it's not false or a functional widget is a themed widget true because you have controller widgets that are part of different themes then in panel it's always false right because your control which is not going to be in a panel and then functional widget they can bury right it can be in power or not okay and then so let's create a new theme pretty quickly so they know we're short on time okay so here we have a custom theme and basically I have this config dot name JSON I'm not gonna go through the folder structure but basically what Gavin did same same way manifest name your theme the name of the folders got to match the name of theme the name of your strings got to match the name of your theme as well whether you'll get up unable to load error on that okay sir we have a custom theme so we're gonna go through it pretty quickly and an import some CSS okay so we have a master CSS that overrides all the theme of our CSS so I have this the CSS that's called dev summit theme right and the first thing that we're going to do is we're going to import a font and we're going to import a font from from Google and it's basically we're gonna override the GMU main font and declare it a font family the next thing we're going to do is we're going to do it override right and the rig base is going to say hey for this layer list section title give it a font-family of that and with light labels on layer bro names we're gonna overwrite that okay so that's going to encompass everything and our styles is going to look for that CSS it's gonna use any Mbutu font okay so the next thing that we're gonna do is we want to edit a particular style CSS because we can have different styles as you know with the web app builder you can have one default you can have many different so the next thing that we're going to do is we're going to go ahead and set the font to that depths of my theme CSS so we're gonna do an import that dev summit theme the next thing we're gonna do is we're going to overwrite the gym UMaine so we're gonna say hey Jim you background give me white right and then next thing we're gonna do is we're going to do the gym you title right all right okay and then if we just hit ctrl save real quick and we go back to our theme you're gonna see some some stuff that doesn't make sense because now it's all white our icons are hidden here right so we got to account for that we have this weird divider here this doesn't look too good here so we can change those Kara sticks right as simply just modifying some of some CSS okay so the next thing that we're going to do is we're gonna do ctrl we're gonna do Jim you zoom so I have all code snippets in here and basically what we're writing is we're overriding the default color scheme and opacity for the home button in these widgets that are on the screen okay the next thing we're gonna do is we're gonna do Jim you header and then basically here's where our work is done we're overriding the title pop-up pane to match our colors we're overriding the Jim you paddle title and here's some some ways to change the backgrounds on our fonts when the pop up icon nodes and then we're gonna change the color of our header controller drop-down so if we if we if we if we consolidate widgets to 14 pics and then we change our drop-down menu etc right so if we hit search save we go back here we load you're going to notice now we have be able to handle this it matches our theme now the last thing we can do is we're gonna override some CSS to change this search here okay so we're just going to back into our CSS and we're gonna do remember we inherit all those widgets from dojo so basically we can go in here and change the search button to a padding of six pics no border over on hover and focus we want it background color of white we want a font color of blue and then our input is blue with 14 pics and there's no border right so if we go back into our widget here we refresh here's our widget matches that it's more blended into it right so now if I go on to a web app builder and let's create a new theme here and let's call this famous testing here all right so we're gonna create a theme and one of the questions I got today is can you export templates of course you can you just need a house those on your web server so now I have this icon for def so I'm at 3 that I did for dev summit theme that I didn't show but here's our theme right here and as you can see here I got many different styles here that they're already pre-wired but it's basically this style blue and let's say I want to save this and export it as a template I can get CERN app parameters which is just a silly JSON to save that template out to my org and I've had exports in my organization or our local server alright let's see we can just call this testing dev summit anyone who grabs this theme can use a web map into that theme now it's exported to my org here and next time someone calls a web map right as long as this on a hosted web server somewhere they can in bed their web map into my theme okay so that's another way you can export templates alright okay so communion you wanna just go through the community turn that okay so how do we be successful with it right we always don't know the answers to all the questions so one thing that we always like to start and push is our dock right so we have great documentation or constantly improving it that includes online help for our documentation that's for you know online ArcGIS online and then we have our developer edition with it and then we have a very top-five popular group called web app builder and ArcGIS geo net very responsive you get your questions answered so if you're asking questions regarding that people in the community are willing to help a lot of people are building widgets as they're sharing which is even better because if you're 80% there it's better than 0% there right so people are building stuff reuse it recode it and you know give it your own style other online resources so we have our our solution teams builds these particular vertical solutions that are on widgets and they put those on github other lists of widgets are co-chairing dark GS comm and then ESRI as ESRI get okay OH web app builder custom widgets and then we're gonna consolidate our code and then we're gonna share with you the theme and widgets that we built today on github and you guys can pull that information and have fun with it or just look all that syntax works and stuff like that so for those who didn't go to the session earlier we wanted to share with you what's coming just give you a little bit of info here it's this thing called experience builder okay and basically what experience builder is it's it's gonna be a new GUI builder to build configure web apps and web pages skate as you know web app builder is very map centric right that's always the focal point experienced builder you could be web apps and web pages all it's all going to be based on react right that's what we're building the the GUI interface with react it's gonna have an extensible framework for creating widgets and templates it's gonna be on all our 4x API of course it's going to target a couple different personas developers to create web apps and etc designers if you're creating UI to create themes it's gonna be much more simpler more drag-and-drop type solutions developers to build any kind of solution app templates and then of course domain experts of a like to build these hey your question No okay so here are some key features so it's going to be mobile friendly same web app or web page on a mobile can be configured separately from the desktop it's going to have integrated 2d and 3d as you know right now when you create web app builder you have to create two instance of applications it's gonna be all integrated you could switch between the map view and scene view directly in the app and then more importantly you can be able to analyze your web apps and web pages to build a complete picture uses statistics you got to know what your app purpose is and actually look at statistics how people are using your app and then lastly as well as you got to have an extensible framework right for all developers to create widgets and templates right we're not getting rid of web app builder they're gonna release right we have both of them and to give you a little idea of what the release plan is we're gonna have a beta release see the yellow fought in the bottom subject to change okay and so beta release me I'm gonna say Jewish you you see time I'm believing and then we're gonna have a so that's ArcGIS aligned and the developer edition okay and then fourth quarter mmm December I'm going out on a limb here I'm gonna think that we're gonna have final right so we'll have something fully released for you and then those for your using Enterprise pretty early 2020 right so look out for that it's pretty cool I don't know if you guys have seen it before but it's pretty cool what's its you know if you just want to create like web pages and web apps and you know it takes a lot of and you're still gonna have widget development and stuff but the UI is a lot different and it's based upon a react so so look out for that and with that we wanted to open up to questions and what we always strive for is we hope you learn something new and if you didn't we didn't do a good job but what we always want is we always want honest assessment on the surveys because we need to get a raise so if you guys get it's a good score no just give you honest feedback cause we're always tweaking this presentation next year of the experience builder but and with web app builder but hey thank you for coming I know it's late you're probably hungry you're hangry but thank you we appreciate your time coming out here that's that question make so much okay [Applause]

Channel: Esri Events

Views: 9,214

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

Id: MKEIvRlybC4

Length: 54min 0sec (3240 seconds)

Published: Wed Apr 03 2019