Click here for a transcript of the Introduction to Web AppBuilder for ArcGIS.
PRESENTER: Starting at the web map from the previous video, we're now going to make this into a web app builder app. So, to do this, there are two versions of Web App Builder, one that's hosted on ArcGIS online, and one called the Developer Edition, which you can download and modify yourself.
So first, we're going to go over the hosted version, on ArcGIS online. I'm going to get there, once you're in your web map you can click share, and make a web application button. Then there's this Web App Builder tab. So it's already filled in, our title tags summary for us. I'm going to click, get started, and we are brought into the web builder for ArcGIS. So over here we can see we have our web app and this is kind of the interface surrounding it. That's the app that Web App Builder is building for you. You can customize the style of that with this left pane as well as changing layout, um, different themes. Web App Builder works around these widgets. So, we have two widgets here, legend, and layer list. There's widget slots as well, here. The widgets pane is where you configure exactly what widgets are going to show up where. So we can see we've got these two slots available. You click that, I can add, for example, a bookmark widget here. And there it is. Web App Builder lets you customize also, name, logo. The map that's loaded in, we're using the map from the previous video, but you can choose other ones that you saved on your account. And going back to the widgets, these are customizable. So, if you click the pencil icon of these widgets, you can actually add new bookmarks, and for this particular one, but the settings will be different for every widget.
So, besides just seeing what it's going to look like in the browser, in the browser we can see, preview it and see what it will look like on mobile devices. So, here it is on an iPad size device. We can make it so what you look like on a phone. And Web App Builder makes apps that are responsive. So, as you can see here, the UI fits the screen depending on what size a device you have. Get to the other widgets here, just a different way of looking at it when it's at a smaller screen size, but the map is still fully accessible. So, that's the hosted version of web app builder.
The developer edition can be found on the developer site. Go to documentation, I've already downloaded web builder, so I'll go there now. Once you unzip the file, you'll find there's a startup file which you'll use to launch Web App Builder. So, start it up and open a new browser window. The first thing you'll specify is your organization, or portal URL. If you are using a developer account, you'll find this by clicking on your profile name, and then the account URL path. So that's been filled in already. So for app ID we're going to create a new app. It can be found by clicking the applications button, and we see we already have a ECCE app challenge. That's from previously opening up a hosted version of Web App Builder. So we'll go there and click, register application. There we have our client ID. Paste that into the box, click continue. We get an error message, invalid redirect, so to fix this, we need to go to the authentication tab under the application you're using, and enter in the machine name for current redirect URLs. So, we're going to add in, machine name can be found here, the URL. We’re going to use that HTTP, and HTTPS. And when we refresh this, continue, we now get this request for permission. And this is Web App Builder asking for the ability to access your ArcGIS online account. So we'll approve that, and now we're a Web App Builder, developer edition.
So, we're going to create a new app, and once this loads we'll see that we're in the same type of environment that we were in on the hosted version, which looks exactly the same with the same widgets and themes. We haven't chosen the right web app, so we can go in here and you can choose our ECCE map, challenge map, but the rest of the interface is the same. I'm going to save that, and go back to the main screen.
So, now with this screen, we can create a whole bunch of web apps here, but the one we just created we want to download and modify. So, I'm going to hit this button and then the download link. And once it is downloaded it’ll give you a zip of all the code behind that app. I'm going to go there and unzip it to my server. Take all these files, extract, and I'll create a new Web App Builder folder and unzip it, those files, into there.
Once that's done, we can go and view the app, on our local server. So, we've just been, used the default widgets. These are already created for us. But to create your own, that's really the benefit of using the developer edition, is now we can go into the widgets folder and here are all the widgets that were already created for us. We can add our own widget. And actually, the web app builder installation has a sample widget you can use. So, inside of this path there is a sample widgets directory, and you can use the custom widget template. Copy this, as the base for the widget you're going to develop. And this structure is how all the other widgets, all the other widgets follow the same structure for organizing their code. So all the actual code is in the JS file, the widget.js file, and the HTML structure, the markup.
So, I'm going to open up the widget.js file. And you can see these functions here, messages to communicate with the app container. These are methods you'll, you'll use and comment when you actually go ahead and start putting in your own code. On the home screen of the web app builder page, I go back to the documentation. There's a guide that has some help for widget development. So I recommend you read through this to get comfortable how the Web App Builder works and how it uses widgets. There’s also themes you can develop to change how it looks, and some sample code you can use.