Developing Custom Extensions in Operations Dashboard for ArcGIS

my name is Tiff's and with me today is sunny welcome to this session we're going to talk about developing custom expansions for operations dashboard for ArcGIS so let me get started by doing a quick survey so how many of you have never used dashboard before can you please raise your hand okay we got this side if you're especially before so people over here use - for people I assume have you developed expansions or add-ins before dashboard no okay that's what so we've got a mix of audience here so hopefully after this session everyone will get something useful that would be helpful to your to your chart when you go back next week oh by the way we also got Patrick who also works in our team and he will help answer some tough questions ok so let's quickly talk about the agenda today first of all I'll give an overview about operations - the application itself so for those of you who've never used the app it will be a good starting point for you to get some idea about what the app is for for those of you who have used the dashboard before just take it as a quick refresh for yourself and then we'll jump right into talking about expanding operations dashboard after that van is going to give us three demos and after after the demos I'm going to talk about deploying dashboard extensions into the production environment and finally we'll cover the roadmap and then we'll have a Q&A session at the end so overview of operations dashboard so um ops - what is a visualization tool for making decision it's also used very widely for monitoring real time events so as an example I have a screen shot at the top of the screen that shows a Boston Marathon and dashboard was used in that event to keep track of the runners where they are in in that area and where the police vehicles are ambulances first eight stations and efforts like that so the app is used to keep track of the situation in the in a marathon - what is also used to visualize key performance indicators so as an example the app is used by a lot of oil and gas companies in a way that they might have a whole bunch of oil wells in the field so they use - for to keep track of the temperature and pressure and other other attributes of the of the oil wells in the field so - Ford comes with two flavors it has a Windows platform that you can install and and run on a Windows machine and you use the Windows machine to create content it also comes with a companion browser application that you can use to open the content created by the windows dashboard on the browser so for example if your end-users they like to use iPad or maybe an Android device then they can open the content created created by the windows dashboard on the tablet device so talking about the Windows app a lot of people ask what the license if it's free actually the Windows app and also browser apps they are free so you can just download them from your access online organization or portal organization right so this is just a quick overview about the app so now let's talk about the content that gets created by the operations dashboard so we call this content the operation view and there are two kinds of users here one is the author of an operation view so these are the bunch of people with the privilege to create content update and delete content in the org so they will also be the people to create dashboard sorry to create operations view configure them and then view a very focused operation view for the end users so then the other group of users are those who interact with the operation views and components inside so what are the components of of an operation view there are few kinds of key components of each operation view and again you can see some examples on the screenshot of the other side so the first key component of an operation view is widgets so on which they are visualization or sync up information display so they can be a map so you see a map widget on the center of each operation view usually surrounded by a whole bunch of infographics or charts like our chart pie chart histogram things like that you can also put some descriptive text on it to describe what this operation do is for so first type is widget second type of key components is called map tools so if you look at each of the map widgets at the top there's a toolbar with a bunch of tools that you can use to interact with the map so to give you an example you can put a bunch of bookmarks on your map so it can help you navigate to different places on your map the third kind of components in Nashville is called feature action so their little action that you can execute on individual features so I'll give you an example you see there's a list widget on the obvio at the bottom so on the list it shows all the features one for one item for each feature so if you want to know where exactly that feature is on the map you can pick that feature from the list and then run a highlight feature action and I will highlight that same feature on the map so widget map shows future action these are the three kinds of key components of each operation view and they're very important for you to understand them because you will be also writing an extension and making it which map to or a feature action so we provide a whole bunch of building or out of the path components for you that you can configure them to be a very focused operational picture for your own situation so there's one more key component to each operation view and that of course your data so I'm talking about data it can be a host feature surface that's hosted in your objects online organization it can also be a feature surface on your RGS server it can also be a dynamic map surface but regardless you bring this data into a web map and then from this what map you you bring it into dashboard and now we call this beta feature layers so there are some layers do you wonder you don't want to use them to to power your widgets you just want them to be reference layers but for those layers that you want to use to power the widgets you make them data sources so um so once you have a data source you can create a widget off of that data source so let's take that list widget as an example so you can create a list widget to consume a whole set of let's say firetrucks of features from your feature feature layer so from that list that shows all the fire trucks the story doesn't stop there actually you can also select a subset of features from that list and use that subset to become an other data source for other widgets so as an example like a details widget that you can show the details of each individual firetrucks features that you select from the list so now you see the concept of like a chain of data sources from your Fisher layer to your entire data source and then you select a bunch of features that you're more interested in and use it to drive other widgets something I did not show on this slide is is the concept of selection data source so the idea is that you can from the map you can select some features that you want to look into more closely and use that selection to power the widgets that you want to create like a gauge or chart inside that in ops dashboard you can have refresh interval on your layer so let's say you have a again the side features the backend data may be data gets updated every six seconds so you want to make sure that you have that refresh interval carryover in your operation view so that your features will be updated every 6 seconds and the change will be reflected on a map as well as on all the widgets ok so this is a quick overview about the apps components all the buildings up so now let's talk about expanding - but with custom functionality so when we talk about extending - Voltorb - for extension what it actually is is that it can be a widget extension a map - extension or future action extension and it's actually a web app maybe a simple web application that you host on your web server and then you just run this web app in the operation view so just like many web application it has a manifest so manifest will be a JSON file that described on the attribute or properties or behavior of your extension it also contains an HTML file and optionally some JavaScript file that that contains the business logic CSS and other resources or external library that you need to use you do an expansion with the RTS API for JavaScript on top of in addition to any other libraries that you want to use and just like the built-in components you can make your extension configurable by the user so that it can be more focused on your operational picture the other cool thing about extension is that once you finish building one extension it can run on both the Windows app and the browser app it pretty seamlessly so to give you some examples about what kind of extensions you can build you can build like a weather information widget that shows you the latest weather updates for your current map area so when you change the map expand it just fetches the latest weather information from some external API and show me that information you can also do a buffer map tool that for example if you click a point on the map that calculates a buffer area that maybe in case of evacuation you know how big the area you need to evacuate a third example is like a future action export to CSV Peter action so you can pick on a feature from your from your favorite list widget and then export those attributes into a CSV file so that you can do further update and actually all these examples I just mentioned you can find them from our github repository as some samples and I'll show you the link in a second okay um so again if you can see the text please come closer this is a very important flight it is great the lifecycle of an expansion obviously if there's one thing you remember from this session please remember this life so we'll start by talking about the orange bus and actually when we talk about the life cycle of an extension there are a lot of different kinds of users that will be involved there are developers and what that means and the arches or ketamine and the people who create a dashboard and use the dashboard and we will describe and I'll talk about each of those in a minute so let's start from the orange box so at the beginning of a development life cycle so the develop that that team will go out and collect requirements and then the developers will start coding so this is step number one of the developers will start writing the expansion so as developers we all know that it's very important to be able to debug and pass our code when we do the coding so the dashboard team provides a special way for you to run the app or to start the app and that's called the death mode or the development mode so with that mode there's two characteristics so the first is that when you start up in that mode you can it comes with something called a debug tool if you have used the chromium debugger before like the the dev console that comes with chrome if the X is this exact same user experience same tool that you can use to debug your extensions on the fly and nonny's will show us how to use the develop tool in her demo so this is number one and number two second thing about the death mode is when you use your extension again it's a web app but during the time time of the development you might not have a web server readily available so when you start the app in decimal it actually can run the extension in localhost so you don't have to have an actual web server in order to start passing your stuff so that's the first part of the orange box so once the whole development cycle completed and the extension is ready to go to production environment so the developer is going to hand over extension to the web admin person so we are now at step number two so the web admin guy is going to take that extension and host it on the company's web server so now it becomes a web app comes with a URL and then the web mean is going to send that URL to the LGS organization that means can be a portal or access online org but regardless um the orchid mean is going to take that URL and register that as an item in your organization and I'll show a demo at the end of the session so that mean is going to take that URL register an extension item in the org and just like any other items that gets created in York the Amin will share that extension item with the person who creates the operation operation view and that goes to step number four and that is the publisher or the person who creates the operation view so that guy is going to it's going to package all the widgets and information in addition to the widgets custom custom extensions into an operation view and finally once the view is built then the publisher will share that operations view with the extensions to the end users so that it can be used so that completes the whole lifecycle okay so now you've got a understanding about the lifecycle of an of an extension so Vani is going to give us the first demo and she talked about how to how to how to start up in that mode and she showed us a table widget so do you Danny thank you this so we are going to look at three demos today about the three most important components of operations dashboard like this mentioned custom extension widget a custom map tool and a custom feature action but before we start looking into the actual demos the first step step is to set up the development environment because we are developing our own code so do important things to note here is to set the development environment and sure the files are hosted on a web server let me show you how that happens let's start dashboard in normal mode on Windows once the application opens open the task manager right click on operations dashboard and click on open file location' this will take us to where the exe is located right click on operations dashboard and create a shortcut again and click on the shortcut right click open the properties window so basically we are telling the application to open in debug mode meaning you should be able to debug and also it needs to pull all your custom extensions from the folder where you have hosted on a web server in my case I have the custom extensions locally on this folder on Cedar summer 2017 and I have considered my is IAS to treat these as web applications so the next step is to add add the EH cdbg parameter to the properties and you'll see the text so you see the target box right up to the EC you copy paste the location where you have your local extensions pre-printed with the parameter e of CDBG click on apply ok now this is the shortcut which you will be using to open the dashboard in dev mode I have already copied it to my desktop you can copy it to any convenient location let's close the normal dashboard you will see this devmode you know when your dashboard opens in dev mode so we know dashboard is used for monitoring real-time data and decision makings assume we are law enforcement officers that are responsible for looking at the road conditions in Toronto and so this is the data we have from the services these are all the default widgets that come with a dashboard application now we are going to go and add our first custom extension it is a custom widget so tools edit of Christian view add widget so this will pull the custom extensions I have in the specified folder in the properties window so you will notice a red box around the custom extensions window this is a way to differentiate it the custom which is locally hosted on your own web server if it is registered on our JS online all you will not see this red box so I'm going to select this click OK now I am going to hook this widget to a data source and I am picking Road incidents selection TIFF mentioned about selection data source so you will see an example how that works right now so you don't see any data and the table because I have hooked it up to the selection data source it's going to select one of the features so this brings the information the attributes with the power for the feature I have clicked so this is how you add a custom extension widget I'm going to save this we all know you can view an Operations view on our web browser to when you add custom extensions to you can do the same to do that you click on dev mode and you do open in browser so we see the custom extension added here and we see the same results let's take a quick look at the code first let's take a look at the left the file structure so the most important file in this is the JSON file this is also known as the manifest file this basically contains the properties that decides the behavior of the extension so the there are three different types of properties one is general we have the runtime and the configuration properties the general properties define what kind of an extension it is going to be the type is the most important of all you will have to specify if it is a widget or a map to a lot of feature action these are the three supported type extensions and it is case sensitive there are some optional properties like title and description and one of the important properties to note here is they used data from view meaning if you notice when I added the custom widget I picked a data source so I need to specify used data from you to true if I am go to consumer data source and this runtime contains the path to the file that will open as an extension during runtime and this is a configuration property meaning and setting this required data source to true only then I will see the drop-down to pick the data source for my widget so the next is the HTML file this is basically what is rendered as an web app on your operation view so we follow the dojo style so we declare our custom extension as a dojo digit or of widget so that's what we specify here in the data type we set that default properties using the dojo config so here we set the extension path and we set a sink as true it is very important to specify the dojo config before the JavaScript API CDN if not it will not work because the configuration need to be set before we open the CDN and once this is for passing the Dom elements so this can basically be Dom and pass the elements when they are ready for us this template dot HTML contains the actual UI so we are using a degree two they are data in the table that's what you see here and this is another important file this is where our business logic is so we follow the ang style of coding so we have declared all the required modules and referenced them here basically all those are widgets they ensure it a base class known as widget base and extend a mixin call templated mixin this is basically to render the UI so you can there are several lifecycle methods for a dojo widget like constructor post create and destroy you can override all of those methods then we add our custom extension to the Operations dashboard basically a communication needs to be established between our web app and operations view once that is successful we offer a function or we trigger an event called host ready to our API only after which you can manipulate and do your own customization of the code so once the host is ready that means the communication has been successfully established we said our business logic in here so I have a memory to to store the data and we hooked up the widget to a data source but we cannot access a data source right so we offer something called as datasource proxy to our API which basically gives you an instance of the data source that is what is this and this is I'm initializing my G grid and I'm also setting up a query to query the attributes I need this is another important function to note the data source expired this gets triggered three times in the lifecycle of an operation view when the initialization happens or when you pan or zoom your map that is basically when the extent of the map changes or if you have a refresh interval meaning the dashboard is for monitoring live data so we have a refresh and we can you can set up the refresh interval where the data can be refreshed at five milliseconds 10 milliseconds so you we get the data so those are the three times the data source expired will get triggered and the most important function we use or the most common function we use is the execute query so this gives us the and then we update the table title and the data on the table so going back to the view so we open the view in a jet mode basically to debug so you can enter the debug mode in two different ways one is if you notice here there is a small triangle button I'm not sure if it's clear you can either click on the triangle or click on there mode and say open debug tool so I can click on this go to the source this is basically like you are using a chrome debugger I can set a breakpoint here and it can pan or zoom the map it's post in my debugger and you can make changes to your code say for examples I'm entering a console log do so I can just basically refresh this to see the code change you see the console.log dot statement here but if you are going to make a change to the JSON file the manifest field then you have to basically remove and add the extension so this is the first demo and over to you - thank you so um thanks Bonnie okay um okay let's do a quick recap about what we just saw in the first time oh so in this demo Bonnie showed us how to create a custom widget extension so once again an extension consists of a manifest file which is the JSON file and html5 file and optionally a JavaScript file that describes the business logic CSS files and other resources like images of thumbnails so the manifest contains properties that drive the behavior of an extension for example the title the name of the extension whether it's a widget map to a future action whether it uses the data from your operations view or not it's all tripping if all described in that manifest file so some key concepts that are very are talked about when she showed the code so I'm a widget or a expansion it's like a dojo digit so basically it has a bunch of life cycle methods so we start from a constructor to post create function and then it comes to the host ready function that that's something that we provide in the API and that would be called when the application the dashboard and your extension are ready to work together and that's where you have access to most of the properties that you need after that you start calling your business logic and do the stuff that you need for your operations view valley also talked about the datasource expired method so this method is usually used when you want to execute query so what I meant is um when a data self expired happens you want to re execute a query I the data source to get the latest information from the data or from the surface and finally also mention about the three situations that beta sauce expired will be triggered so first is up the host ready it's called that's when the relationship between the apps dashboard and expansion has established second situation is when someone changed the map extent that's when we know that hey data source expired we need to fetch the data again by running execute query the third situation is when data source refresh happens so let's take that example that every six seconds I want to see the latest information about my fire trucks so every six seconds the data source will be refreshed and then beta sauce expired will be caught and then I can go and do a execute query to get the latest information about my lair and then we also show us how to start the app in that mode so and she also showed us how to use the debug tool for debugging your code putting breakpoints stepping through the code or even changing the source code and feed on the slide so if you make change to your your extension during the development mode there are two two situations one is you make changes to the J's file CSS or the HTML file basically anything other than your manifest if you make a change and you want to get the update it's very simple you just have to achieve the refresh button on the debug tool or if you're using a browser just hit the refresh button on a browser then you get the latest change however if you make a change to the manifest file then for the Windows application you just need to remove that custom extension added back again or you just have to close the app started again in order to see the change from the manifest for the browser app again very simple just hit the refresh button or f5 it and then you'll get the latest change okay so now I'm in the second demo Vani is going to show us another kind of extension and that's a social type of map tool so back to you've any ink it is so this time we are going to look at a custom map tool so now I'm also as an officer you know as a law enforcement officer I'm interested in looking at the snow conditions the road conditions driving conditions and I want to take a look at the snow so we are going to use this map tool to do that so if you notice in this map tool you know you see the red box and you see a Settings button this map tool has an additional part to the code which is called as the consideration part when we when we added the map widget we use the default configuration and we pick the data source here we are going to set the configuration so I'm going to say I need to look at the snow conditions and the radius is 15 miles say for example 30 days you see the map tool here in the tool bar let's click on it so which thing I can click on the map this creates the buffer and pulls all the images all the pictures so you see one big highlighted icon here that points to the location you see on the picture so if I move the pictures you will see that icon moving along with it so a quick look at the source code of this is the change in the JSON would be you would specify an additional part of the configuration which is the path to the configuration file and in the list of files you will see two additional files one is the configuration template which is the UI of the configuration and the business logic in the configuration which is the config dot J's so this is the UI where we enter the date and the radius and this is the configuration part an important thing to note here is you can set a property property at configuration time and retrieve it at runtime here also basically we follow the AMD style of coding like the runtime configuration so if you notice here there is something called this dot config you can set any properties to the digital config object and this will be persisted and render to you at runtime for instance I'm setting the search text based on the value I enter in the test in the text box so once I enter then I set a property called ready to persist config as true which means it will save this search text in the config object and I can use it at runtime so this is my runtime Jai is fine I can retrieve it straight this is dot search text and that's it over to you - thank you okay cool um so so in the second demo we look at a map tool extension so this is another extensible point that you can you can do extensions on and to give you extra functionality that you can interact with the map widget so let me show us how to build an extension that's configurable so just like any other built-in widgets or map tool you can build an extension that can be configured by the end-users and to do that you implement the UI and also the business logic to capture and to validate all those configurations so you might be wondering where where do they where do those configurations we are they saved basically so I'm actually all these configurations that you capture from the UI they will be saved into part of the operation view so an operation view is essentially a bunch of JSON data so on all the settings or configurations that you have from your extensions will be safe will be serialized and then safe with the JSON data in the view so when we also talked about how to capture a property in a convict time so to do that it's very simple we provide an object call that this config so you just have to pass your property into the distal config object give it a value and in runtime you want to retrieve that property and to do that there are two scenarios one is if you are developing a map tool and a widget or a widget just like what then it just showed us to retrieve that property you just call this dot then the property name and then it will give you back the that profits the property that you save however if you're writing a feature action expansion then the way to retrieve it is you do a event properties config and then property names so event properties is what you get when you execute that feature action so this is like different here like difference here between how you retrieve the properties in run time for different kinds of extensions alright so now let's jump into the third demo where van is going to show us a custom feature action that sure used to export attributes into CSV files so our back to Yvonne thanks again sis so this time we're going to add a custom feature action again we know if the custom with a red box around and this is a configuration part to here I am going to for example I want to save the data or the attributes of the road incidents for future references are archived those I can pick the attributes that I'm interested in I'm interested in all of them right now so I'm checking on ok ok so ok let's click in the windows windows version of the dashboard you will do a right-click for the feature action so let's click on export CSV this will open an excel sheet with the attributes we picked and the values and we can save this let's see how the same thing works on a browser I have added a couple extensions after the first demo we looked at the browsers if i refresh it should pick up all the extensions now so we have the map tool which transcript action so the difference is in a browser version it actually downloads the CSV you can open the see it's pretty much the same quick look at the export CSV source code so the JSON we specify the type of feature action here you also have a configuration part so the difference would be the way in which you save the property at configuration time here there is something called event properties so you save the configures this dot configured selected field names when you retrieve it at run time you will retrieve it as part of the event properties here so when you execute the future action you will get an instance of the event properties and you access the config object using even properties dot config dot whatever property you set a configuration that's the only difference in retrieving the config property between the map tool and the custom widget as opposed to the future action and that's it for me over Tudor and okay okay so it was a quick demo so just one thing to do to recap and that is the fact that you can retrieve the properties that you save to convict in runtime using the event properties object so through that you can get your properties and then and then use it to run the future action so now we have looked at all these kinds of extensible points and an example for each of those so now let's talk a little bit about deployment so when we look at the roadmap again although it's pretty small but you still have an idea that we've now moved from the orange path to the blue box where we can start talking about deploying the extension to your web server and the production environment so I'll first walk you through all the detailed stuff and then I'll do a quick demo about how to deploy an extension in your organization so there are a couple of steps here in deployment so first is you have to hold your extension to a web server this might be done by developers or might be done by the web admin person or other other people involved in this process there are a couple of things you want to make sure that your your web server has I mean there are a couple requirements that you want to make sure that your web server has met so first is you want to make sure that your web server has HTTPS enabled with a valid certificate this is particularly important if you're RJ's organization and forces HTTP so you want to make sure that your web server also support that in order not to create like a mixed content kind of problem in addition to that you want to you want to enable course the cross-origin resource sharing in your web server because that's when when you when your user use expansion you want to allow your audience organization to have access to your web server so you want to make sure that your objects org is a trusted domain in your web server certainly you want to make sure that if you are going to register your extensions in RJ's online organization you want to make sure that your are anonymously accessible from the web server this does not apply to portal if you're using a portal number three does not apply to you so for portal users mainly portal tense for or above users you can also host your extensions behind the web adapter so here I provide like a typical location where you will you store your extensions so that your portal install install folder then there's a subdirectory called app and underneath there's a dashboard and that an extensions folder so that's where you want to put your extensions if you if you're planning to put them behind a web adapter of your portal okay so once you put those extensions on the web adapter then you can access the extensions through that URL example that I show on the on the slide here so now the extension is a hosted on the web server whether it's a external server or portal next step if you register that as an item in the objects organization and this is typically done by the ArcGIS or cat mean so yeah I've covered the first point that it has to be done by admin cannot be done by people with other privileges like a publisher or like a level one user so what the Emil will do is that guy will reference the extensions URL and then the orc is going to create an item for that extension so just like any other items the admin will share that extension item for the rest with the rest of the organization and then the person who create a dashboard or the operations view will bring in the extension with all the built-in components package it and then share it with the end-users okay and I've cover step three here okay so now let me do a quick demo about how to deploy on extension or register the extensions in your orc okay okay so now let's say I'm at the point that my extensions all the extensions I need they are already in my company's web server so like I mentioned I want to make sure that these extensions are anonymously accessible meaning I don't have to sign in with a username password I can just access it secondly I want to make sure that my server supports HTTP so let's try that so okay that's good I can I can access my ex my extensions through HTTP or HTTPS to make it more safe I'm going to continue my workflow with the HTTP URL so there's a table widget and that's the same one as the one that van is shown us in her demo so in order to register that extension I'm going to go into the URL to the manifest of that of that extension I take that URL I copy that so now it also happens that on the objects or admin as well as the web server I mean so now I've signed in to my organization as an administrator so under my content I'm going to do an ad item and then pick an application so here you see an option that I can create an operation stash extension and once again if I'm not and I mean I will not see this option at all so let me pick this one and then I'm going to throw in the manifest URL so I'm just going to paste what I just copied and then it's going to actually go into the JSON and then try to read the data for example it will grab the title from the JSON and then it will populate it here and also for the read text that you see at the bottom of the dialog it actually also comes from the manifest so from the manifest it knows that the extension is going to use the data from the operation view so it's going to show you a little message here that says hey this extension will use the data is that okay so if everything is fine I'm going to just give it a tag and then do add item oops okay let's give it a different name demo okay so just like a web map item or just like operation view item this is an off stash extension item so next step is I'm going to share it with the people that will be using this extension so it can be a certain group of the orc can be the whole orc so once I finish sharing this extension item then let me show you the screenshot and then let me come back to my slide okay so at the bottom of the screen you see that I have the end user can started the windows dashboard in the machine and when they log into that organization and if they have access to that extension then that extension will show up when they try to add that widget or map to of Attraction depending on the type of that extension so this is the the basic workflow about how you register an extension into your organization once again it has to be done by an orc and mean okay so now let's spend some time and talk about roadmap go ahead and what we've been working on all right so so those of you who have come to our island and talked to us or maybe you already know that we are working on a second generation - what so it's going to give you a new experience so throughout this session I've been talking about the Windows app and the browser app so there are two flavors of operations dashboard but something we've been working on so far is we're trying to build a dashboard that's totally running on browser so you'll be able to author and a dashboard using the app we provide on the browser it will give you a very flexible layout the way you want to place your widgets and other components on the on the dashboard itself delaio is very flexible it also comes with some enhancement on smart mapping support and labeling support and it will also provide a and improved charting library and additional functionality and you might be wondering what about the extensibility so the second generation - will be extensible at some point in the future and if you're interested to get to know more about the the second generation - vault please sign up for beta program and true love to hear your feedback okay so now let's do a final recap and I'll talk about some key text away from this session so at the beginning we'll talk about operations dashboard what the app is so uh special is a visualization tool that you use to monitor real-time events or key performance indicators and talking about extensibility there are three expensable point which is map tools and interactions and we look at a demo for each type of extensions so extensions are web apps that you develop using the JavaScript API and any other API that you need and you can also use the - - for debug tool to test and debug your extensions during the development lifecycle an extension can work on both the windows and the browser platform and as vanish shoulders in the demos each extension consists of at the minimum a manifest file and an html5 file and optionally some JavaScript and CSS files finally you can use your extensions with your objects organization or just online organization or portal org all right so if you want to learn more we have a whole bunch of resources I encourage you to start from our tutorials and and the API documentation so we have got three tutorials that walks you through like how to build an expansion from scratch we have two for our custom widgets and one for custom map tool like I mentioned we've got a bunch of sample in our github repository so go to github.com s3 - for example if you want to learn more about the app you can read the RGS book chatter 9 it's all about operations dashboard and again we strongly encourage to join our beta program and if you want to stay in touch if you have questions or find about you can email us at dashboard for LG s @ s recom and you can go to your net and and talk to us so we have about 10 minutes and any questions okay okay oh yes okay so our question is the beta axis it has extensibility yes right so as of now the beta app does not have extensibility yet but this is something that will will be supported in the future in the in the in the new app in the second generation dashboard for sure we don't have like a timeline on when that will happen but this is definitely something in our mind because we know there are people who want to extend that yep yes okay so the question is is the extension of the new dashboard okay if the new dash for going to be compatible with the so the new app and the existing extensions right actually we are not too sure yet because with you refining the story but we are pretty hopeful that even though you you have to make some tricks to your existing extension it should not be very painful because we we are trying to like for the new app the extensibility framework it will also be a JavaScript based extensibility framework just like accessing one so the transition should be pretty easy for you but I mean you you you expect there are some changes that you need to make yes Thanks library okay okay um so if your extension has references to external libraries how does it work so you can either download the library like if it's a charting library like these free you can download the Jas file and then package it as part of your your extension or you can just reference the CDN let me give you a quick example right here back to my web server so we have one code the scatterplot ancient social media we have a moment oh it's not in the server okay let me see yes so in this data plot widget we are using actually the d3 charting library so you can just download and download it and put it in the same folder just reference it in html5 Thanks yes available for the yes um so the source code is available so you just need to go to github I'm trying to make it bigger but I think I can't so you can go to github.com / f3 / - 4 samples and you can find all the samples that are we are we hosted out there mm-hmm yep any other questions no okay then thank you very much thanks [Applause]

Channel: Esri Events

Views: 4,269

Rating: 5 out of 5

Keywords: Esri, ArcGIS, GIS, Esri Events, JavaScript, widgets, customize

Id: Hol5PBCfZUY

Length: 52min 34sec (3154 seconds)

Published: Thu Mar 30 2017