ArcGIS API for JavaScript: Getting Started

welcome to the RTS API for JavaScript getting started session my name is Beorn Swenson I'm the lead part engineer for the JavaScript API and with me today is on robust economic product engineer on a JavaScript API G all right how many people here have written JavaScript code almost everybody how many people have used to Arceus API for JavaScript and you all know this is a getting started session right just checking how many people have written for X code only a few people how many people read in 3x most people or half plus all right we have no secrets at the end of today we're going to start telling you about why you shouldn't write code and then we're going to talk a little bit about development and how you set up your environment and what you use we're going to talk about the Arceus platform and why you should use web maps and web scenes and how your Maps will be easier and happier when you do that we're going to use the daya sake of the column which is our documentation or develop sdk where we have our api reference guide topics and samples and we're going to cover four topics specific for people who are not familiar with using the javascript api and those are layers visualizations pop-ups and widgets most of those there are full section sessions or multiple sessions on later on this week and we'll give references to those don't write code if you don't have to either I provides the number of applications that you can use out of the box or with minor configuration can set it up so that you like them you probably already familiar with the map viewer in ArcGIS online on portal and as part of that there's also presentations where you can create based on a web map and a basis like a PowerPoint presentations where each scene or each slide is the different extent a different set of layers of different pop-ups you can also create web applications either using a template using one of the configurable apps or using the web app builder how many people have used web app builder more than half how many people have used configurable apps less people but still some people how many people use the embedded viewer all right almost nobody I'm here to tell you that it's a really cool thing what you see at the bottom of my screen here it's a embedded viewer when you go to our kits online you click the share button one of the options is for embedding it in a different web page that's actually the whole application so if you just want a simple application that's something that's very useful and if in this case I'm showing it with no options on at all it also tells me more options for example you can have a search box you can have the legend toggle the base maps that the base map back and forth this is all using the embedded viewer so this is one more of those options work if this is what you need then you don't have to create your own applications nobody left the room so I assume you guys didn't buy that all right if you're working with JavaScript already like most of you but not all you probably already asked somebody or have been asked what ie should I be using ID or text editor there are quite a few of them and not everybody agrees on which ones you should use I use Visual Studio code which is not Visual Studio it's a different products or microsoft window here uses sublime some people our team uses webstorm brackets a-tom there are many more most of you probably don't write perfect code so it makes sense to test your applications limping is one way you can make that possible we're not going to talk too much about it now but we'll refer to it in some of the other sections and I want to talk about three sections that are coming this week one of them is right after this one where Renee and yan is going to talk about the programming pattern since API fundamentals in the 4x API that's going to be a very useful session if you want to work with the 4x JavaScript API another one that's one of my favorites is a tips and tricks for developing and debugging apps it's going on right now and there's also a repeat on Friday as one to two and if your geographer and already yes analysts that are just getting started with JavaScript I recommend the Thursday morning session about JavaScript for geographers when you're working with did you always get the API as much as possible to make your life easier take advantage of the platform using a web map there web map is basically you document that contains which layers and base Maps do you want to have what's pop ups do you want to have and how do you want them configured how do you want to symbolize your data all of this is part of the web map by having it stored in the web map you can have that same document being open in pro in javascript in any of the apps and templates or in runtime it also makes it as a very easy way of setting up your symbology and we'll be showing more of that today all right let's go to use the JavaScript API the joke API right now comes in two flavors we have a 3x flavor which is currently on 3.20 and 4x which is currently on 4.3 and we release this end of last week so these are the laser very latest versions a lot of the questions we're getting this week is about which version of the API you should use and this is a little difficult at this point in time because it depends we are moving to a new version of Java the API but it takes time and in the meantime we are maintaining two versions and picking either one of those it's a good option but it depends on what you're trying to do if you're trying to create the 3d application you have no choice but using our 4x API look and to help you pick these we actually have a number of topic that discusses this work version to choose and this goes over a few basic capabilities the basic comes down to if the functionality you have existing the 4x API then that's probably the better version to start with and if you need something doesn't exist yet you might want to consider the free X version if you have an existing application and you want to add some functionality to that you probably better on and keep using your existing application at this point until the 4x has more functionality that you're looking for in the rest of our session today here we're going to be talking about the 4x JavaScript API but most of the concepts are very similar even if it code is a little different in the documentation we have our APA reference this is a place where I go every day and look at it this is sort of our even in the team this is what we use to keep track of things and this is what we use to find out how things are supposed to work and most of the time they work that way we have a number of samples and you can search for these if you want to see all the 2d samples you can see we have 458 of those and if you want to see all the 3d samples 60 so we're sharing the love between 2d and 3d now we haven't showed any code yet and that's what we'd like to do so window is going to show you the hello world with the Forex API that you or me noise yes okay okay so in this demo we're going to create a very simple 3d JavaScript application in order to create that application I'm going to use sublime as the text editor I use to create all of my JavaScript applications so as you can see here I have a HTML file called hello roadmap HTML file and then you can see also I have some of the important pieces sold out already and then in this demo we'll be showing out the missing information and sta end of the demo we'll have our fully functional JavaScript application so before we start writing our code let's just quickly review what this HTML file has and for some of you probably be boring because you're going to be going over this HTML file structure so HTML has a tag as a head and body tag so for this can you guys see the code back in the back ok ok so this body div has a one day file and it's ID is Fugit ok so in the body tag basically you add all of your HTML elements that you want to display in your browser application so here you will add things like buttons input boxes drop-down whatever you want to show to your users in your browser so here we only have one div and we're going to use this tip later in the programmatic way and it will be adding our 3d view into this Dave ok so let's take a look at the head tag of the head tag contains all the different tags that describe the characteristics of your application like title of your application different style definitions to define the look and fill all of your HTML elements on the page so in this case we have a style act within the cells have tagged with the setting the view disk height and width to 100% so when we run the application our scene view is going to fill up the entire browser window and then these two lines of a code basically how you will have to copy and paste in every single JavaScript application you're creating the first one is referencing an external cascading style sheet file in this case it happens to be the main CSS file for JavaScript API version 4.3 so this file again has one of the definitions for the old HTML elements used by the ArcGIS JavaScript version 4.3 and we are referencing an external javascript library in this case it is the version 4.3 so the only thing probably will change for these two lines is the version of the JavaScript file you're using okay so now we have a script tag so if within this script tag we're gonna start writing the code where we're creating a map and the map we're going to reference a Road St Athan line wall street's map and then we're going to display it in a 3d globe okay so that's where we're going to write this code so before again we start writing a code let's just take a look at what we have in this tag so far so there is a require so require I'm sure if you guys written a 3x samples or applications you know what it does but since you can think of it as a keyword that allows you to load JavaScript modules or a unit of reusable code so why even have a required load individual module it's because we want even though you can go and reference everything there is to load in a 4.3 JavaScript library you shouldn't because you should try to keep the footprint of your JavaScript application as small as possible only load the module you need to use within your application so in this case I really when then specify that I want to use it is reflash views flashed in view module so this module allows me to create scene view and then so you can display the data in the 3d environment and then also have a dot your Dom ready module being loaded so this module here just a forces all the HTML elements you specified in your body tag gets loaded into the browser before your JavaScript code runs so that way your JavaScript script if it's looking for HTML elements in your browser it's making sure those elements are available for you to use so now what we need to do is we need to add in map to the our 3d application and the map is the way you add base maps and layers to your application so we need to add the load module or the map module and then at this point probably some of you are asking ok how do I find out the name of the module I want to vote for that you got to go to the SDK document that Bjorn showed earlier oops got a tension sorry I'm getting confused here so that's the K document I'm going to the API reference path so here in the 80s your reference tab you will see in a table of contents you will see all the different modules you can load into your JavaScript applications or also you can search for the name of the modules if you know the name of it so in this case since I know it I'm just going to type in math it comes back with results so I'm going to click on the map class and the map classes module name is isre slash map but I'm going to go ahead and click on the SDK document and in the deck a document the first line here tells you what exactly you need to do in order to load this module and a JavaScript application so here is the module name I need to reference in my Dow script application and it has a nice long description of what this class and then also it has nice the simple snippet code how you can use this class in a JavaScript application so here in this simple code snippet here we're creating a new instance of a map and while we are initializing this map class we are setting the base map property of this map object to ask us online street base map ok so I'm going to go back to my code I'm going to paste what I copied and then comma to separate out the module and then now I need to pass in the name of the class to the function that I'm going to write so this function already has the scene view commit to being passed in and then now I'm going to pass in the map module so just remember the name the order of your function parameters also need to match the order of the modules you have in your require array ok so I'm going to now start writing an actual JavaScript code so we're going to create a new map and going to set the base map property of our map to the last year's online street base map so I'm going to declare a variable called my map and I'm going to create a new map so to create a new map just use a bracket now we have a new map but while we initialize it I want to set the base map property so if you want to set any of the properties for this class when you're initializing it currently you put curly bracket and I'm just going to enter a new line because it's easy to read the code and then the property name is base map and I'm going to pass in a well-known string for the ArcGIS online Street space lab so now we have a map that has a base map now we need to create the scene view scene view just allows you to create 3d applications and then scene view won't display the map that you've created so I'm going to create a new variable called view I'm going to use the new keyword scene view and creating a new instance and have to set several properties of the chin view of object so first we are going to set the map property to the map object we just created so I'm gonna type in my map and then also we're going to Center our scene view at the United States so I'm going to set the center property and then for the center property we just pass in the array of longitude and latitude okay and then lastly I'm going to set a container property so the container property tells the scene view where it needs to be displayed within a web browser so remember that do you dist have I showed you earlier so we want to display the scene view inside this div tag so for the container property you pass in the idea of your HTML element as a string so I save this file now we have a fully functional JavaScript application so I'm gonna go to my Chrome and then I have it already loaded it would empty so we're going to refresh this HTML file and here we have a fully functional JavaScript application with the scene view using the world and streets based map centered on United States I can zoom in zoom out can also I can tilt and I can look around okay so within few minutes we've created a fully fashioned 3d applications masculine thank you Andrew that's all you have to know pretty straightforward our mics don't seem to play for well can you turn it off what I'm talking in here now it's nice to have a base map but you probably want to do something more exciting with your applications we want to cover four topics today layer specialization pop ups and widgets and each one of those will show some basic code and best practice with getting started with code layers you probably know that you have more than base maps you want to put a new layer on your map we do this with layers there are different types of layers from ArcGIS server you can usually get things like our PS tiles Arceus dynamic services which we in the Forex API coppa map image layer feature services or feature layers that can point to either map services or feature services we also have some non s3 formats like OpenStreetMaps and web tell layers where you can connect to any website layer well as W MTS or something similar now in the Forex API we also have 3d support it also means we have some new service types for that scene layer points are layers or some examples of that now some of these layers or most of these layers are supported in both 2d and 3d and some layers are specific so for example a point cloud layer doesn't really make sense in 2d so it's only supported on 3d and in your scene views in both the 3x API and the for X we have 16 different types of layers they're not exactly the same because in for X we have support for these 3d ones and we haven't yet ported all the layers from 3x to 4x but most of them the basic coding pattern for layers there are two ways to do it okay so the basic coding pattern for adding layers to your map is there are two ways of adding layers to your map so first is just to create a new instance of the layer you want to add to your map and set the URL property of that layer to the your services URL okay and then just a call the add method on your map object and passing the day you've just created the second way is you can add a layer from a portal item okay using this a from portal item method so we're going to show you how to use those in a sample so in this case i'm going to go to sdk i'm going to go to the sample tab so as you can see in this beyond mentioned we have lots of samples logically grouped into different categories and i'm going to go to layers section and i'm going to click on that feature layer sample so the future.there every sample landing page has a live sample and then also there's a little different descriptions associated with explaining what the sample does and then also you can open the samples either in a sandbox or gs bin which allows you to modify the source code on the fly and see the changes directly in the browser or you can just go and view the feature that the sample live so in this case i'm going to open this sample and a sandbox so in a sandbox on the left hand side you see the source code and then the interactive sample on the right hand side so again it's the same old code we're loading the module in this case we're creating a QT application because we're loading map view module so when you want to show your data in 2d you are at the matthew module then we are loading is relays feature load feature layer module okay so creating a new map new map view then we're creating a new feature layer and then we're setting the URL property of the feature layer to this feature service okay so now you have the feature service now we're calling the add method on the map object and passing in the future layer yes so just to show that this is an interactive application and you can modify the code I'm going to comment out the section where we are adding the feature layers to the map I'm going to refresh the application now you can see the future layer is no longer available on the map because even though we're creating an instance of the new features there we're not adding it to the map so I'm going to uncomment our code line now refresh it again so if I go click on those features from the features a you can see that I'm not getting any additional information associated with those features so next let's go ahead and take a look at how you can add a date from a portal item so I'm opening up another SDK sample out-of-the-box in the sandbox and as you can see here we added this layer is already has been a symbolized knife feed and then as I go click on those features we're getting information associated with those features that I click on so let's take a look at the code this happens to be a 3d application because we're referencing a loading the scene view module and then we're loading the layer module so here we're calling the front portal item method from the layer object and passing in the idea of the portal item layer ok so when this there gets loaded then we're going to call a function called add layer and then we're going to add the layers to the map so as you can see it's like I didn't have to specify have this layer should be symbolized or the additional pop-up information should be displayed when I click on the futures so where did this come from so one advantage of adding a portal layers directly to your fgts application is whatever you said in save displayed whatever settings with the ArcGIS API JavaScript API honors those settings so here we symbolize the futures and then as you can see we also set up the pop up for the layer so then we saved it and we use the unique ID to add it to the JavaScript application and all that information carried through to the JavaScript application last year thank you and roll that's how we get their data on the map once you have it on the map there's many ways you can visualize it and you can like window mentioned like window mentioned the symbology can be set when you publish your service it can be set when you create an item in our case online and you can also change it in the your application now the visualization types you can do on the data you have it depends on the data so we have a number of symbols and renders and most of these works for both 2d and 3d but somewhat specific to 3d and the same thing with data there's some data you can't display in 2d like the meshes and the point clouds and so this symbology proposals will only apply in 3d when you do apply your visualization to your features you can do that in two ways either specific to an individual graphic or more often probably you going to do it on a whole layer and the basic coding pattern is the same no matter which one you use of these oh sorry there's a lot of switching so in this demo we're going to again show you a very basic example that assigns a simple renderer to a feature layer visualization is is such a big topic in itself and after I finish talking bjørn's going to point out some of the technical sessions that are happening about visualization at Vista okay so again this is out of the box sample as you can see here we have our three different layers the major cities and highways and States so as you can see all the major cities are symbolized with the big red dots and all the major highways have a st. emoji and same thing for the state boundaries okay so we're going to take a look at how we're setting the renderer for the major cities and once we learn how this renderer is set the same concepts can apply to highways and boundaries for this sample so if you're mentioned essentially there are two different ways of assigning symbols to your features first is to create the symbol you want to use and assign that symbol directly to the symbol property of your graphic on the map but this is the last common way of using it the most common way of visual art symbolizing your features on the map is to set the renderer of your layer so in this case we have a teacher layer so let's take a look at here we're creating a new tt's feature layer and then we're setting the URL address we know this already and then also on top of that we're setting the render of property of our future layers to this cities renderer object so let's go take a look at how this is created so if I go back up here we're creating a new simple renderer so because we are symbolizing every single feature in this latest game with gain symbol we're creating a simple render but for some reason if you wanted to symbolize all the cities based on its name which probably isn't a good idea then you can create a unique value renderer and then assign different symbols for each city different based on the name and then indicate you would create a unique value renderer but in this case we're creating a simple renderer and because simple render only gets one symbol uses one symbol to symbolize everything there's a symbol property so we're creating a simple marker symbol okay because we're symbolizing point features we are creating a simple marker symbol also you can use different symbols like picture marker symbol and different symbols so how can you find out what types of renderers there are or sim simple there are cancel the SDK document the SDK document will go into the details of what types of renders there are or what types of symbols you can create so in this create case we're creating a simple marker symbol setting the size to be 10 assigning a red car and then we're signing an outline and it has a very white outline and gives you this like of red dots with a bigger halo effect so notice that I'm not telling anywhere in this code that this is going to be a circle the symbol marker symbols default style is circle but you also can assign different shapes like diamonds and crosses so and so forth so now we've created a simple renderer then you go and assign that renders to your feature layers render back to be on there's a lot of things that can be said about visualization if you read the Arceus online blogs we've had a number of blog posts about smart mapping and visualization over last year but at the dev summit now we have two sessions that I want to promote there's the 3d visualization with dorkiest a pair for JavaScript that's tomorrow at one o'clock CSF for lunch and then on first day just after lunch in the room behind us is the 2d visualization with Dorothea's APR for JavaScript so those should be really good and useful so we talked about layers we talked about visualization and we briefly mentioned about pop-ups the main uses of popups is to display information and is usually associated with a feature that's on the map already and it usually comes from your layer so let's say you have a feature layer and you want to display the attributes for that feature and you use the pop-up template to do that if you have something that's where you ask the user to click on the map first and then you get some information about either reverse geocoding or about that point then the place to go the class to use is tip pop-up typically when you use date you know you click somewhere on the map and then it shows up not a pop up template it's used as the template way of formatting the attributes that are already available in the feature that you have and you can decide which attributes you want to show how you want to display them you can use some text and can be a paragraph or a sentence or you can be a table you can use some simple HTML markup to make a display you can also display media and that can either be a chart based on different fields in your attributes or it can be an image that's coming from a URL that you have stored with your feature you can also specify for your fields and how they should be formatted you might want to texturing some of your number formatter to show how many digits you did if you want to have and you can use States formats to show display and you preferred a format that the months come before the day or vice versa you can also display the attachments in your pop-ups one of the nice things about the Forex API something funny with this thing worth if there's somebody behind the scenes I could clean this up for me thank you maybe that's I was saying magic is amazing with the Forex API we made it really easy to add custom actions so you pop up so let's say that you want to allow people to do something like create the geoprocessing or send an email once you click on the pop-up you can do this really easy in the Forex API now the top the information for displaying the pop up can come from different ways so we're web map is one way where it can be stored you can also be store with a layer like we saw in the layer example before another aspect of the pop-up template this is pretty easy to style it in this case you see a purplish tint to it and only we'll be showing that soon and the pop-up template follow the basic coding pattern okay so in this demo we're going to again take a look at another out-of-the-box SDK sample that creates a pop-up template for the future there so if I go click on a feature layer again the pop-up template is being displayed and this pop-up template is being set programmatically in a JavaScript API ok so let's go take a look at how this is being done so if I go down in a code the teachers are going to have the future there is being created first so creating a new future layer setting the URL address in this case we are setting the Alex fields property of the future layer to a wild-card so essentially what we're saying here is go ahead and grab all the attribute fields from the favorites and bring it into the client so that we can read the values out of those attribute fields and display it in pop up field then you're setting the pop-up template property of this feature layer so let's go take a look at how the template object is being created so here's our template object and there is our title property so in the title properties we're passing that simple string but if you see there is a word a zip is surrounded by curly bracket so essentially what we're saying here is this is a field stored in a future service and at front time go ahead and replace this string with the actual value from the field so when I go click on a zip code area then that values being read from the attribute values being read from that future and then being replaced on the fly in the zip code in a pop-up template now content in this case is just a simple formatted HTML markup so we're just creating a little paragraph and then here we're get reading again a value from the marriage rate field then we're creating a list you can see the list here basically we have our three bulleted lists so we're creating the three both of look here right again just reading values out of attribute fields and I'm placing them in a list so then we have a field enforce array within this field in port area what we're doing is if you can see we're using the marriage current year information in our list and we are formatting the values we're reading from this attribute field before we display it on a pop-up template so what we're saying here is just a show full numbers get rid of the decimal places so using the field enforce property on your pop-up template object you can format your attribute you're being attributed reading from the field okay so you can format the date field you can format the numeric field maybe you want to put a dollar sign or percentage whatever before or after the strings you can do it through a dead field enforce property okay so now what I one thing I want to show you quickly is just I want to go and change this the background color of this pop-up template so the one way Cooke of weighing doing is I can go and change actually the stylesheet describes the defines all the controls we're adding in this JavaScript application so here in my stylesheet section the main CSS what I'm going to do is I'm going to replace change the path so I'm going to type in things and then in this case I'm going to get a light purple scene that's all you need to do and then if i refresh the application you can see my zoomin zoom-out button has a purple background if I click on my futures now I'm getting a purple backup so now you could be asking like how can I find out exactly what things are available available out of the box again when in doubt always go to this PK document and everything is documented SDK and also we have different sample showing all of those things we are covering here today we talked about layers we talked about pop-ups and we talked about visualization all of these sub parts and things that can be stored in your web app web map what I want to talk about now is something that's not usually story it cannot be stored in your web map but something that's part of your applications anyway and those are widgets now the jealousy API provides a number of widgets out of the box they usually focus on one or more tasks for example the print widget prints some of them are things we have the input different options like print prints widget or the search widget some of them are mere buttons we assume you nurse your mouse or go back to the initial layer extent we use these widgets across our own application so the RTS online map viewer their web app builder the configurable apps they all reuse a lot of widgets and so we try to make those in the in the API and then they can be reused against the s3 application as well as your own applications when you open up the map viewer scene view it comes with a number of default widget and the scene view has a few extra ones for 3d navigation in the forest API so far we have the base map gallery the base map toggle the layer list legend print scale bar search and if you add a widget in the 3x API we have more widgets and those are being ported to the 4x API as well the basic coding pattern for idiots it's very consistent yes and we saw it so in order to add a widget to your application you need to create a new instance of that widget and then go ahead and add that widget to the view and then apply saw every single widgets that are available out of the box so again I didn't like as you can see you now didn't write any of the codes I'm keep going back to the sticky samples that or exist on a sticky page in this case I'm opening map layers list widget so the latest widget is just the widget that allows you to toggle the visibility of these in your map so let's go ahead and take a look at how we're adding this layers list widget so - in order to add the latest widget you need to load the layers list module and in this case we're creating a scene view and adding a web scene ArcGIS online item to our scene view then what we're doing is one thing I forgot actually fails to mention it if you're going to create a edit widget to your application you always have to wait for your view to finishes loading so to make sure that you're viewed initialized and ready to be used you call the then method on your view okay so what the view is initialized within this view this is the function that we're going to call when the view is initialized then I'm creating a new layer list and setting the view property of the layer list to the view so that display list knows which layers to display so it's associated with this view then you call the view as a UI property on the UI property your color add method passing the widget you just created and tell the UI where you want to add this widget to so in this case we're adding it to the top right position now I can easily just go and add this to the top bottom the chicken porridge thank you I'm going to refresh it so now my layer list has been moved to the bottom right position so again you may be again asking yourself like exactly where can I place the widget when I go and add it again even though I'm not showing it to you in the SDK document it is documented in that decay okay we hinted at the different UI aspects of the Forex API and we'll talk more about that in our session afterwards at the 5:30 fundamentals but basically it allows you to put things in the different corners you can put the number of widgets in the top left or top right bottom left bottom right and if we have a lot of requests for it we'll consider that top bottom as a new feature enhancement there's a number of stations about the widgets and the UI aspect about customizing variks api for javascript widgets is about using the existing ones and customizing them to sort of the introduction that's Wednesday tomorrow at one o'clock if you want to create your own widgets then we have a session for that that's on Thursday morning 10:30 and then there's a deep dive on how some of the videos that we created how those were made and created that's writing we have a number of widgets already in the API and that sort of finalizes our presentation I want to say thank you and if you have any questions now is the time to ask those all right for all those who want to ask questions in private no hands all right here we go so the question is how different is that with customer and a widget in the API versus a web app builder widget so the website builder has its own framework and sort of a wrapper around the widget so a lot of the wages are in the web app builder are basically just wrapped versions of the API widget so it's based on the same wages and then reused any more questions where there so the question is if you're if you add a feature layer using URL and there's security on it what happens you get prompted to log in so in the most basic use case if you don't specify anything else you'll be prompted for a username and password the pull-up question is how often does that happen I'm pretty sure it only happens once per URL or per endpoints so we basically realize that you've tried that one it fails we're not going to give you any more I mean once you get the identifier the login things you can thrive at until you get tired of it if you don't remember your password but if you close this Dell one and then try again on that layer it's not going to be working until you refresh your browser sorry secure this orbits honorable thing they're full of follow-up questions about the set stuff token related and yet this is a short-answer question in the back that's a great great question I feel like I planted that one but I don't know the guy the question is when you pour the three X widgets to four X did you do anything or are they pretty much the same it's a great question because we actually spend a lot of time on making sure that the Forex weeds work well in a lot of scenarios both touch scenarios and on mobile and also making sure that the they're easy to extend the user experience off the mark good so in this example the print with one that was a rewritten a fair amount and if you use the print widget in the web app builder you can sort of see some of the things that then later on made it into the API m4x some weighted states pretty much the same like the scale bar hasn't changed questions another question somewhere over there there that's a great question I couldn't have rated very if I planted it do you want to so the question is in the example of the top of the marriage rates there was the different values for one number another and can you do some math to add those together or show percentage that that's the question so we actually have a really nice way to do that and we call Arcade expressions so this was released as part of I think in December in our case online and JavaScript API and there's number of sessions on arcade expressions and it's something that works in both pro runtime and JavaScript API and basically it allows you to create variables on the fly and then you can use those either for rendering or for displaying them and windows want to add to that Mike in our case is just passing in a simple markup of HTML but also you can set a function and then just edit passing the name of the function and then execute or yeah so you can do that and we have samples that show that that's the old way and it still works great I guess it's the total current way all right more questions the question is is Arcadian only tended for expressions or their more plans that right there are more plans that's it all right thank you very much for coming

Channel: Esri Events

Views: 10,161

Rating: 5 out of 5

Keywords: Esri, ArcGIS, GIS, Esri Events, API, JavaScript, development environment, debugging, online, SDK, data, widgets, Server

Id: pYHWoSNsSIU

Length: 50min 35sec (3035 seconds)

Published: Thu Mar 23 2017