App Challenge 2021 - Introduction to Web AppBuilder for ArcGIS

hi again everybody this is dr michael leahy i want to introduce you to one of the more popular options that teams have chosen in previous years for the app challenge to create their applications and that's to use the web app builder for arcgis you have two options for working with this one is the out of the box version that you get with arcgis online when you share your web maps as an application and the other is to run the developer version where you can create your web app builder applications locally on your own machine and include your own custom code and functionality to extend the themes and widgets that it provides i'll get to the developer version of web app builder in a moment for now i'll show you the out of the box version that you can use directly from arcgis online you can see i have a web map open here with data that i was using earlier in this video series from the city of halifax what i can do is start sharing this and i can choose the option to create a web app and rather than selecting an existing template i can use web app builder to configure a brand new application you'll be prompted to provide details which will be used to create an item in your content which is where the configuration of your instance of this web app builder application will be stored when the builder loads you'll see a preview of your application with its current configuration in the right hand side and a panel where you can configure the theme the widgets and properties of your application on the left you'll see you have a variety of themes that you can choose from out of the box each of these will change the general layout look and feel of your application depending on the theme that you choose you can select from a set of predefined colors to style your application or you can specify a custom color to use each theme will also have configured layouts that you can choose from these define the general positioning of elements on the page each instance of a web app builder application needs to be linked to a web map since we launched this from a web map in arcgis online it's already configured however if you need to change the web map you can do so here and select from any existing web map that you have access to you can override the initial extent customize the visible scales and override refresh intervals on any dynamic layers that you have in your map within each theme we can control the widgets that are configured and displayed to the user of the application depending on the theme you choose you'll have different places where you can configure these and each theme will also have typically a handful of widgets that are built into the theme you may be able to configure them and turn them on and off but you won't be able to remove them from the theme itself now in this case we have what's called a header controller widget that's the toolbar at the top and within this we have the ability to add any number of widgets we want to what's known as a widget pool so i can add an about widget and when i select this i'll be prompted to configure it and in this case the configuration consists of the content that's displayed to the end user now as we configure and add these widgets to our application we see them appear live in the preview pane and we can interact with them as if we're viewing this application live each theme provides a set of placeholders that we can use to configure any of the available widgets to appear as buttons on the screen i can select the bookmark widget for example and configure it how i want it to appear in my application and i can create default bookmarks that will appear for any users that open this web app i can define the title thumbnail set the extent and choose which layers will be visible when they choose this bookmark all of this gets saved in the configuration that will be associated with the widget that appears in this placeholder it gets packaged along with all of the other configuration that's saved with our item for this particular web application as we configure our applications in web app builder we can preview what they'll look like on different devices if we click the previews button at the bottom we're presented with a view that shows different known devices with certain screen sizes on the left that we can select and a preview of what our application will look like when a user accesses it from that kind of a device and we can switch between portrait and landscape views and while we have the app open in this preview we can interact with it as if we're actually working on that kind of a device to see how well our widgets and our themes adapt to the different screen sizes when you're happy with the configuration of your application you can save it and that'll write it to the item that was created in your arcgis online content when you chose to share the web map from the arcgis online map viewer you can see the web mapping application item that was created when i chose to share my web map and use the web app builder we can come back to this item at any time and either edit the application which will launch the web app builder interface again where we can configure the theme further and add and alter the widgets that it uses we can also view the application itself and this is the url that you would use to share this from the hosted version of web app builder in arcgis online remember that when you want to share this to people you'll need to share the item here in arcgis online you'll select either members of the public or specific users or groups or people in your own organization to have permission to view this application keep in mind you'll also need to share the web map that your application is using and any feature layers or content that are contained within that you can also download a copy of this web application and place it on your own web server to host the application locally although it's still going to require access to your web map in arcgis online while the arcgis online version of web app builder allows you to create very functional custom web mapping applications without writing any code yourself you're limited from altering the appearance of the themes or the functionality of the widgets beyond the customization options that are exposed to you through the builder plus you can't add your own widgets to the online version of web app builder so if you want to be able to do this you're going to have to work with the developer edition of arcgis web app builder to get started with web app builder developer edition visit the arcgis developers website and in the documentation follow the link to arcgis web app builder here in this main documentation for web app builder you'll find a link to download the sdk i've already done this and extracted the files onto my local hard drive when you do this you'll find a startup batch file that you can execute this will launch web app builder on your local machine and open it up in your web browser first thing you'll see is a request to configure the this instance of web app builder with an organizational url this is where our developers subscription comes in handy because we can use the organization that comes with it to authorize the web app builder developer edition so i'm going to copy the main part of the url and paste that into this prompt here now you'll see on the next step we're asked to provide an application id so this is something we need to create we can do that from the developer portal you'll see much of the content that we've been building throughout this video series present here what i'm going to do is create a new app which is what's going to basically be used to authorize the web app builder developer edition on my local machine and once you register this application this is the client id that you're going to need to provide and you'll need to specify a redirect url this is going to be the url of web app builder that's running on your local machine so i'm going to paste this app id here or the client id and then i'm going to take the domain and the port that web app builder is running on on my local machine and i'm going to provide that here as a valid redirect url and just for good measure i'm going to add another copy with the https protocol if you forget to do this then when you follow the next step you'll get a error message saying that the redirect was invalid and you'll have to go back and make sure you have it configured correctly at this point you're now authorizing web app builder on your local machine to use your arcgis online account we approve that and now we are running once we approve the self-signed certificate we're running a local instance of the web app builder developer edition now you can get started building apps very quickly by clicking the create new button and you'll choose one of the templates that comes with the web app builder developer edition you have the option to choose from default 2d and 3d templates and then there's a few other templates that you might want to try another option that you can use is if you've already built an application in arcgis online with the online version of web app builder using the account that you've authorized your web app builder developer edition you can download the configuration for any of these applications that you've already built so i'm going to select this one that we built just a moment ago and that's going to create an instance of this application on my local machine and now i can start working with it in the developer version of web app builder now that we have this item here we can launch it to see the application running on my local machine and this looks just like it did in arcgis online except we now have access to all of the source code and components that are running this now if we don't want to start building it then we can click the edit button to continue configuring this app and you'll see the web app builder interface it looks pretty much exactly like it did in arcgis online except it's now running on our local machine and we have access to all of the source behind this as you build your applications using the web app builder developer edition it's good to understand where the files that you're using are located the source files that create these applications while you're building an application you'll be pulling files from the client subfolder from the stem app for 2d applications or stem app 3d if you're working with 3d web scenes and inside here you'll find all of the source code for the themes and all of the widgets that are available in the interface for building your application now if you wanted to for example create your own custom widgets there's lots of samples you can use to get started they also teach you with various aspects of the web app builder framework so it's a great resource to learn to create your own custom widgets that you can distribute for others to use in the web app builder developer edition now when you create an app and start building it those files are actually going to be placed into an instance of the application located in the server apps folder so this one i'm working on right now it has an id of two and it's located in this folder and what happens is the web app builder will add and remove source code for the relevant widgets and themes that we choose for our application and install the configuration that makes them come alive when we load the application in a web browser so you can take a copy of this folder as is and actually place it in a web server somewhere and share your application and then you can start working on the source code or if you want you can use the web interface for the web app builder and from one of these applications you can click the download link and you'll get a zip file that contains all of the source code for that application to learn more about how to work with the web app builder developer edition return to its web page and i'd recommend you start with the guide for example take a look at the development overview where you get a good indication of what the file structure of a widget is and there's lots of other articles that you can read through here to learn better about how to develop with the arcgis web app builder framework remember you'll also need to be familiar with the arcgis api for javascript either the 3.x version if you're working with 2d apps or the 4.x version if you're using 3d web scenes there's lots of sample code that you can refer to you can connect to members of the community and read through the various documentation and resources that are available to you so that you can develop effectively and create a great app by the end of the week for the app challenge

Channel: Esri Canada Higher Education & Research

Views: 1,002

Rating: 5 out of 5

Keywords:

Id: GSxKVaXnUJU

Length: 14min 34sec (874 seconds)

Published: Thu Mar 11 2021