ArcGIS Experience Builder: Getting Started with Creating Web Solutions

hello everyone and welcome to the ArcGIS experience builder session called getting started with creating web solutions my name is David Martinez and I'm here with my colleague um ah hello and we are with the experience builder development team I'm a product engineer and UA is one of our talented developers with that let's get started in today's session we're going to cover the following agenda we'll introduce you to experience builder and demonstrate some of the UI from there we'll go into the developer tools next we'll get into some key concepts for widget development and creating a widget we'll switch gears and talk about the UI system and experience builder which includes themes and components and then we'll wrap things up with the next steps and those will be actions on your part so what is an inexperienced well we define and experience how you cognitively and emotionally interact with digital content either for business or your just daily life this can consist of web pages web apps or mobile apps and a perfect example is is when you go to a site you're not trying to decipher and say is this a web page there's just a web app you're basically looking at is this giving me the best experience possible is it quick does it load fast as a responsive so what we did is we took to make use of the digital content we created ArcGIS experience builder and what this does is it allows you to create unique web experiences using flexible layouts content and widgets they interact with 2d and 3d data and some of the benefits include complete complete control over the layout and design in other words one design doesn't fit all and for those who don't need that complete control you can get started one of our templates that meets your most common workflows and of course since this is a developer presentation we need that ability to create our own custom or clothes and we're first started scoping out experience builder we had these design goals in - requirements first it had to be data-driven so basically your apps designs are driven by your data I would argue that your data is always going to drive that your app design it's not going to be other way around we wanted flexibility in mind the ability to create experiences and apps whether it's map centric or not map centric whether it's a linear scrolling page for example configurable allow you to create apps with ease with each release of experience builder will provide additional templates as well extensibility we look back at what we need to provide and we needed to provide not only extensibility but an SDK that included samples and an API reference that comes directly from our source code and mobile app tivity and basically what this is it provides you the options to create unique designs for large screen and small screen sizes for example maybe the map is front and center in a large screen size but in a mobile view maybe the list is the primary view and the map is secondary on another page and basically what that is is each layout is an adaptation of the experience which offers more flexibility and customization for better usage of screen size with different content so let's talk about our technology stack like I said before experienced experienced builders extensible framework and we use several technologies so let's starting from let's start from the bottom we use typescript and that's our official language it's worked very well for us and it's used throughout the builder react is the librarian we use for building user interfaces Redux is a predictable state container that helps us manage app state in an app store web packed is is used for a model module bundle and of course we use the latest ArcGIS API 4x for working with ArcGIS technology and what's great about it is we only load the API when it's needed and at the center of this all is Jim you library and this is a framework and that's what you're going to use to extend experience builder and we'll talk about this shortly so there are several components that make up an experience first you start with a template either one created that we provided or you can create your own then you add your widgets and if you'd like you can change the default color scheme or font by selecting a new theme data source is going to be what's providing the data coming into your widgets some widgets might have a data source some may not but that's and then finally what we do is we inject our Jim new library into everything and then that's provided within the Builder all this gets bundled into that and then what happens is everything gets injected to this config dot JSON file that makes up all those different areas of that experience and then that creates your experience in and that's rendered and now as opposed to talking about it what I wanted to do was take some time to give you a quick UI walkthrough because what I've realized is some aim that this may be your first exposure to looking at the experience builder so I'm gonna go ahead and switch my screen here and we're going to go into the local browser here and remember there's currently there's two versions of experience blur there's one for experience at our chest com that's our online version that's wikis WYSIWYG what you see is what you get here what I'm looking at is our developer edition experience tour and this is the one for developers and it has extensibility and that's we're gonna be talking about today so when you first come into experience where you're going to be at the experience gallery so this is going to take contain all your experiences and one thing I like to point out is all your experiences here are not on our chest line they're hosted on your local developer edition so it is up to you to publish those to your favorite web service and the way you do that is you click these more options here and you hit download and then you distribute that package to your local if' server ok so as you can see you can see what states these experiences are in this one's published these aren't draft mode so let's go through the process of creating a new experience so once I hit create new I'm going to be presented with all the templates that we provide now these are templates that our team has vetted to provide you responsiveness going back to that mobile adaptation the first four or map centric templates where it's a full screen app the next three or more of your linear scrolling type page more of a flow layout and then of course if any of these don't meet your requirements you can create a blank screen template or blank scrolling page and creat your own but first let's just go ahead and select a template here and when we first come into the UI there's lots of different options here the first is on our side panel here let's go ahead and unlock this layout and basically what this lock layout does is that if you're going to provide a template to users this prevents them from adding any widgets or changing any positions of widgets this plus sign here is basically the widget panel allows you to add the widgets here has shows the current page and this this experience we have one page loaded this is access to my different data sources since this is a template there's no data source and here's how you change the theme just by selecting it or customizing at our top here we have our header this is basically the name of the experience by default we use an title experience when we create it and then we just do a number count you can look at the experience in Live View before you preview or publish it these show the template in different form factors from medium to small screen size one thing I want to make note of is you're gonna see the title widget here but if I go to the mobile view you're gonna see there's no widget therefore title that's by design because we're dealing with limited will estate and that goes back to that that mobile adaptive design where you have control over them so when we create these templates we've made sure the responses on all three form factors when you create your own template from a blank template for example you're going to need to do that next thing you knew those are some undo reduce here you can save you can preview the app and then here you can download create a new one you could generate a template as well and of course if you're done with this you can hit publish well let's let's go through the process of creating a blank page so what I'm going to do is add a blank page here and use blank full screen app and I'm going to walk you through the process of creating a simple application real quick so we're gonna go ahead and add a widget and simply what you do is just drag that to the canvas so this is your canvas and the best way to size this is to use these toolbars above and you can so I want to snap this to the left King and I want to take full height of this and then here I could drag this if I know the width right another option is you can go into this style here and I want to talk about these size and position properties real quick this is a custom right because this is taking up 45% of that so let's say I wanted 50% of this right since this is the full height that's autumn so the Builder automatically aligns that for you based upon that position since we snapped it to the left this is going to be 0 as you notice this right is by default because left is overwriting it so let's assume that I change this with to auto ok you're gonna notice whoa where did my widget go well I can simply change this right to custom and now you're gonna see my widget here that it was warming 50% of the right so if I'm going to act now what I want to do now is add a data source to this I select my content select a web map add new data and the map widget supports two types of data sources and we'll talk about these little detail web map and web scene so I'm gonna go ahead and select this Iowa green certified breweries here now I'm gonna select my data source ok and there's my map so let's let's go in a little bit because I have some layer layer visibility okay so there's my data points the next thing I want to do is I want to add a list to this so I'm simply grab the list widget here and then what I'm gonna do is I'm gonna align this to snap it to the right and then what we'll do is we'll do this flight and then we'll just drag this over so absorbs the rest of this and within the list widget you have different options to select templates so I'm gonna go ahead and select this template I'm gonna hit start same workflows the map you're gonna select your data and I'm gonna select the Iowa green okay and an interesting note of the list widget it's comprises of different widgets this is the image widget which is over here as well as a text in the button widget so I'm gonna go ahead and click the image widget I'm gonna select dynamic and basically I have a URL that contains the thumbnail of the graphic here I'm gonna select the text widget select the data here select the name okay and then if I wanted to I could click the button here and say okay this is more info here and you could have another page that provides you user with more info just that's beyond the list and let's SEC page and we'll go ahead and select page one which was the the first page created with this template and the next thing I can do is I can come in here and say okay I want to create an action for a trigger based on an extent change for the list okay and I'm gonna filter based upon the extent and then I want to do the same thing for the list and add a trigger on any selection change in the map remember one of the beauties about experience builder is you can have multiple Maps so this one we're gonna use map two and then we're going to zoom to and then you can choose a zoom scale looks will accept the default which is automatic here let's hit save and then if we come into our experience here you see the list widgets filtering right there I'm gonna select one here and then okay that watch is to pop up so if I select here that's going to go into that area right there and then the list filters right there okay so that's a simple demo of the UI in here and you could do lots of different stuff I'm thinking what we're gonna do over the next month or so we're going to be releasing some videos to go in more detail up certain configurations of experienced builder that we'll host on YouTube okay so let's get back into our presentation here okay so if I go back into PowerPoint here and as my screen wants to okay so let's talk about developer tools the first thing that you're going to do is to get the developer edition you're going you're going to download it from art from our development website and if I'm Melissa let's let's get out of here real quick and let's go into our browser here and for some reason it's not showing up on my screen but okay so let's just exit out of here all right bear with me here I'm having some problems getting my mouse back here okay so I think we'll just exit out of the screen here okay so now if I go into my browser here so we released the product and we released a new developer site for this so the easiest way to get started is download the SDK you sign in and then you download it and then your package and then we have the directions how to install it whether you're going to register your ID through the developer site or if you're more familiar with using the client ID in online and what we did is we created a guide with some core concepts some widget developments how to get started and then more importantly what we did is we've uploaded our API reference it's coming from our source code and we'll add more interfaces more methods and document more and with each release more importantly I think is we provided sample code so let's say I'm interested in showing the extent we give you how it works a little snippet and then you can actually go to the repo which is on ESRI org and you can clone that repo and use it directly in your environment okay so let's get back to my presentation here so out of out of the box things that you would need to know as you extend experience builder Jim you react in type script so let's let's talk about it a couple of these so the first thing is is Jim you so what is Jim you it's basically it's a JavaScript library and that's it's used in experience builder we we created it so Jim you core provides the interfaces and types to work with widgets properties message actions and data sources and then it also defines several classes that you're gonna be used throughout your experiences for those who are used to working with the JavaScript API are you're gonna utilize RGS services of course we have a Jimmy ArcGIS package that basically contains classes and methods for working with the API the Jim u UI includes UI components to be used in your experiences and we recommend to always use our components to ensure consistency across the experience builder system and then the genu builder is used for developing the winnings the widget setting page and we use react and basically what is react it's a JavaScript library pretty some pretty straightforward for building user interfaces the V think of it as the view in NBC the great thing about react is it has this virtual Dom and it basically represents the UI in memory and basically what it does is as opposed to render an every in thing in the DOM react has this virtual Dom so if you have some changing state which updates the UI it's going on update that area of that thinking of react it's an abscessed so that's why it's an abstraction abstraction from the Dom and when you're developing widgets just think of a widget is basically a react component and that's all it is it's about writing and creating components and basically what it does is it splits the UI into its independent and reusable pieces and it only updates when it needs to providing like simple semantics such as props state and lifecycle and there's two approaches to creating components either using function and class and like I said before since our entire system it is built on typescript you're going to use typescript to extend widgets and basically it's a superset of script and once you get you have typescript plus Jim you plus react it's just goodness so let's let's dive into widget development and let's talk about that so when we're looking at the widget structure the folder structure of your widget is going to be the name of your widget okay is going to be your main your directory and then from there you're gonna have under there you're gonna have your config JSON so if you're injecting anything into the widgets gonna continue your config you're gonna have the icon for the widget which is basically be in the Builder and then you're gonna have the manifest JSON from there you're gonna have a distribution folder which is your compiled code that's what web packs gonna take care of for you and then you're gonna have your source and then your your source is gonna go in two directions and go and you're gonna have a runtime folder which is basically where your widget tsx is gonna have and then if any other dependencies make it maybe you're gonna make use of other components you would have them in there as well that includes assets and translations and then for your settings like if you're gonna provide a setting for your user to configure with it that's going to exist in your settings that TSX file and for those who are very familiar with developing with our other product which is web app builder I wanted to put this in perspective for you so when you're developing with map it ler you have a map and then the widgets hold a map object and can talk directly to the map okay and within spirits builder this is different as you can have multiple Maps and they may require connections to different data source this is called data-driven and a data source defines how a widget accesses data data can be a remote service it can be stored in an app it can be generated by widget and used by another a widget can use more than one data source and you'd like to think of data source it can exist globally or locally as well and basically there's two ways to create a widget the first is class components it makes use of es6 and extends the component classes react in our example we extend the widget class it can maintain it data and state you can pass props down to other class components and access them with dis da props class components will always use the render method and react on the the other the other way to create components last widgets is through function components these are basic JavaScript functions they can access props use estate and other features using react hooks and importantly there is no render method in function so let's take a look at an example of how this it works so our first instance here is a class component this code snippet below creates a simple class component it loads in necessary modules and exports to default widget class and declares the type for all widget props and basically that's going to use props of the widget the render method is called to return the output of hello world and the widget name coming from this dot props label okay so now let's look at the same example using a function component the example loads the modules needed to create a simple hello world function widget the widget is declared as a function with the types props all widget props which is using props of the widget you're gonna notice there's no render in here so you're gonna have a return statement and that return statements your output that returns the hello world and the widget name from the props dot label okay in most experiences a widget won't need to work with a map view or a scene view and also access layers to ensure we have a consistent extensibility model we've wrapped in everything as a gem you map view to make it easy to use JavaScript functionality cross it and to create a map view you basically use the gym you map view object such as map view map manager crate gem you map view and then pass in your properties there such as the view which contains the view object the data source which is the data source crate the view the map widget ID that creates the the widget option and if you're going to work with any layers of that so as opposed to me talking about it let's get into a demo and created a widget from Experion experienced builder so we use Visio studio code here and what we're gonna do is for some reason my workspace was on updated okay so let's get back into this now that's fixed so it's a good pattern to load your client directory in your favorite IDE and what this allows you to do it allows you to use intellisense okay you want to get access to as you type that you can use or our types or interfaces and basically our API so here we're looking at the client directory and where you're going to be working at mostly is in your extensions okay so you're going to notice that we have this client service running and this is basically listening to any changes in this extension folders right off the back point tip number one is green is good text okay if you see anything in red there's a problem it could be the naming convention widget it could be a bug in your code you'll get a flag here in most cases so we're gonna go and go into our map view widget here and you can see we have a runtime for widget and a settings tsx so let's go into our widget settings TXS and let's let's build this widget so the first thing that we're gonna do is I want to show you the manifest.json here and here by default the name property map view needs to match the name property on the folder otherwise it's not going to work the label property here is basically gonna give you the description in the builder of what you want that string to represent the text in the Builder at the bare minimum you'd need the name the type the the the versions of these two for the manifests all these others will change depending upon your widget and this one has properties for locale we don't have a locale here and then the default size is basically when your user drags that to the canvas with the default size of that widget is so let's get back into our widget tsx and let's create our widget here so the first thing that we're going to do is we run import the necessary modules here we're importing react from our Ecore datasource component we're gonna use The Awl widget props from Jimmy core as you can see we we have stuff baked in this is pulling directly from my API there then we're going to import the map view and the web map in extent from the ESRI modules there and then we're going to port the map map view manager and the web map data source okay so let's start building this this out okay so the next thing that we need to do is we need to create our default class here and let's just format this code here so basically what we have is a class here of widget it's it's coming off the base widget we're loading the types always at props here okay so give access to the properties and then in react sometimes you might need to interact directly with Dom nodes or react elements created in the rain in the render method this is possible using this method here at crate ref so we're gonna pass our map as a container to hold it in that development and then here we have some interfaces for properties for map view web map which we're gonna use we're gonna do a watch handle to listen to the extent and this gets into cies gets an instance of our map view manager so let's go ahead and add some more logic here the next thing we're going to do is create a function to load our web map logic here so bear with me here I'm just gonna format this code because this will drive me crazy if I don't and then we'll walk through this code real quick here so shift option F okay so basically what we have here is we have a web map as a data source here assigned to this parameter if it's a web map right so this will be true the return otherwise if it is keep exiting keep going not exiting so here we're going to assign some options to the map view property so that's going to include the map for the web map data source map and here we're gonna change the highlight options so this is coming directly from the jsapi right here so we're gonna change the highlight option so when you select a feature to this color which I believe is yellow the container is going to be this map container current and then basically here is where we're gonna parse the extent to it to a JavaScript object here and then this is where we where we create or our map view object here we grab the widget ID and then pass in this props ID here our view we create a new view instance we assign those options and then our datasource ID is going to be a web map and then our promise based here is doing some extent okay the next thing we need is we need a container for our widgets here so we're gonna add a map node property and sign it to this div class name and we want our user to be able to style the widget to 100% height and width and then our reference for this it's going to be in this map container so the last thing that we need to do is we need to pass in the render function for this particular one here and let's see shift looks like we got two instances here for some reason okay so my code snippets are wrong there okay all right so now basically looking at this render function it's gonna say hey if there's no data source in the data source length please choose a web map setting otherwise use the data source component to grab the data source and then use the data source created to create our data source map view calling that DES created and then assign it to this dot map node okay so if we save this the next thing we want to do is we want to create a settings page for users settings panel for users to configure so what we're going to do is we're going to uncomment this code here and this is so the settings widget is similar to the widgets the widget except that you're gonna have a setting tsx and here we're using the base widget setting here from the Jimmy builder we're gonna look for data source types and then we're going to use the data source selector to allow our user to configure the widget so let's do command what is it command K you uncommon thieves here you're gonna see a class of setting its off the beige twittered setting we're gonna assign the supporter types property to look for a data source types web map you can have multiple data sources in a widget so if you wanted more you could add more in there and then on data source selected we're basically going to grab that data source and this basically the setting change is going to listen to any thing that we change for the data source and use the current selected state and the last thing that we're going to need to do is we're going to pass in the render method for our data sellers component here and then we're going to use the type which is the supported types which is web map and then we're going to use the data source properties to use that data source and then on select we're gonna use a selective one so if we if we save this and we go back into our widget here and what we'll do is let's let's just you're going to refresh the page here and then what we'll do is we'll add a new page here blank and then we're gonna go into our widget panel and we'll grab the map view here we're gonna there's no web map so there's our setting tones to change we're gonna select a data set here you're gonna notice the only data sources support it is web map okay which is by design we'll select this one ok we'll select this map here hit live view and we'll just go in and then there's my yellow highlight that we changed okay now that wasn't a simple widget that we created but hopefully that gave you some fundamentals to - to build widgets so now what I want to do is turn over to my colleague e-way so he could talk about themes in UI components so you ain't go ahead alright alright thanks David alright so in the following sections that we are going to go through the same framework and at the UI components library from experience builder to see how you can utilize this existing tools in your development work so first let's get started with the things so by having a same framework in disputed so one of the reasons is to provide the end users with the ability to define and customized applications overall look and feel so right now the users they can configure the look and a few of their apps by simply modifying the theme variables using the setting panels in the builders UI and they come up with different designs on the fly so this will save time for the users as they no longer need to know how to write CSS okay and besides giving the users more freedom in theming the apps we would also like to provide designers and develop developers with more flexibility so since the new theme theming framework is bearable based and utilizing CSS in JavaScript library the design and development process is much easier compared to the older way of creating CSS styles such as web a beauty so notice has were right and the upper thames can be shared all right so let's taking these two squishes so here as an example the light and dark themes are both configured using the same theme system now instead of reading assess s to override to achieve at you fur look look now you can customize themes in you know a configurable way so our theme now can be customized by providing new values to the theme parameters or I call it theme barbels in a JSON format so for example to make this light theme to this dark theme all you can do is to provide different color values to the theme barbels such as telling the theme to use dark grey as the container background color instead of the white or to use the purple eyes of the header backward instead the blue color this is how you for example to switch from this light theme to this Dorothy so how does the theme system work so the easiest builder we provided a default theme or I call it the master theme that consists of the followings first are the variables these are the key parameters that you find the core aspects from a UI design such as colors found spacing border shadow and NewsAsia and then we have the style modules these are the functions that generate the CSS files for the UI components on a fillet and the verbose mentioned above usually referenced here in these style modules so at the runtime the style modules are loaded and dynamically created the verbals and the generate the CSS files and these CSS files are inserted into the app as static senses other and if the other themes are always standard from this default theme through the approaches such as customizing the theme verbose or adding extra scale modules so let's take a closer look from a more visual way so this chart shows the flow of how a theme is working under the hood along with the components and the widgets so other top left is the theme itself it contains the core variables the core variables are they also have their corresponding CSS utility classes which which you see on the right these classes can be added to the UI elements to quickly add styles to to the elements and then the core variables are referenced by the verbal further components for example the button component has its own background color variable and this variable is using one of the colors from the korver variables then the component variables are passed to the scale modules which are the functions as I mentioned to generate the CSS Styles at the runtime so the CSS then are used to style the components show in the middle of the screen over here the UI components and by default the UI components they are iced out so basically they don't come with the house without a theme and and then they only provide the HTML structures the lifecycle functions perhaps definitions and the functional logics they had a problem we have the Bridget because the widgets are build with the UI components from the theme be Harwich there the styles from the theme as well so a widget can optionally also have its own CSS styles and they utilize their CSS utility classes from the theme to customize the kind of view alright so next we're going to see how exactly base a master theme is going to generate the other themes so the theme over here we is provided as the default theme in a builder and all the other themes including the outlook box of themes and any other custom themes that you might create in the future are all considered as customizations based on the massive thing over here all right so let's take a closer look at the out of box themes by looking at the the buter itself so over here I have already create an application using one of the templates so over here within this app on the left we have a panel and on where we have a met so between the Builder UI on the left hand side within this menu bar you can click this theme I can't to bring up the theme settings by default we have the default theme selected and then you can absolutely choose other themes by clicking the other ones for some of this star theme as you can see it changes the the panel background to black and on the opposite a uses white as a test color and another thing I want to mention is this organization shared theme this theme is reading all the variables from organizations share theme from artists online here I'm just using some simple colors this very bright yellow as the deparment color right here and also here's the demo or the other customized customized theme that you created you they also show up here so any of these themes that you can wear you can do is you can click the custom button and come into this setting panel for example over here you can change the theme colors to any other color for example like I would like to change the primary color to purple as you can see the the header in the panel is changed to two purple right and in the future we are going to provide more options within these settings to allow users to do more customization using the beauty so let's get back to the slides so next I would like to spend some time diving into the details of the core same variables as will be the most commonly used concepts from the theme system and in your future UI work ok either it is customizing themes or creating UI for your custom widgets so first part of the core theme bar goes are the colors so these are there are two groups of colors one is the theme main colors and the color swatches so the in the picture shown below the left half are the theme theme colors that you find a theme overall color scheme so if you are familiar with any existing theme frameworks such as boost red or material UI you should be very familiar with these color names all right so it's just for example primary colors they are used to present primer you are elements such as to show active states or interactive sections for example the buttons or the links and the info success warning and danger there are other colors they are normally used to show status or states such as the alert dialogues then the light color the light colors they are mostly used to to show the background or the borders of the layout elements such as the containers and the separators and then we have the dark colors they are mostly used by the text elements and in the middle based on the theme colors groups of swatches or pallets are generated based on different shades or gray scales to provide the Thema system with more varieties of color to choose from right now each theme color has 9 different color variants all these colors the theme colors plus color swatches and some generic colors such as white bright like transparent they together make the color system in the FINA framework okay so now we have the theme found marbles so they this verbose they include the definitions for first the found marbles the font-family so by default we use s erisa t4 found family which is a veneer next but you can overwrite this verbo to use your own or your organization's own fun family and then we have the phone census first there's a base font size variable day that basically going to modify or changes the phone set for all text talk or text elements but there are also other element specific font size verbose for example like the the verbose for the body tag the headings and the paragraph elements then we have the phone weights these are the variables to control how both the text the text should be and there are a fair option five options including medium medium light or light boot and extra boot the last one we have the line Heights though these control these verbose control the distance between lines of text shown in a paragraph and we have three options including the medium small and a large right then we have the spacing powder and the shadow variables the spacing berbils as seen the first picture they are used to define margins and padding's and in the border radiuses and the shadow variables there there are some handy shortcuts to some common CSS properties values there were committing to use a plain reading the CSS for your apps UI so here's a quick note so if you have noticed that the theme system is using the are um the RAM as the giver unit instead of the pixels as a unit so that the RAM unit has some benefits for example because it is relevant to their brute font size so if you are modifying the roof on size variable you can easily resize everything in the UI which makes the theme more principled and the responsible and next I'm going to talk about the CSS utility classes so these CSS utility classes they are generated from the core theme burbles and these classes can be easily added to any Dom element through the class name attribute so since each of these classes is bound to one theme barble it is convenient to make your apps you are consistent by adding these classes to your UI for example if you add a BG - primary class to a deef the background color of this tea will be picking up the primary color from the theme and in that color will change from theme to thee and you use pewter we follow the same naming convention as the classes from bootstrap and the utility classes they include but not limited to the followings the background color the test color the bolder padding and margin shadow and there's some other classes here we have the least of some most commonly used classes from the eastburns pewter and you can see we have the classes for the background color test color and there's some font of utilities next here's an example of applying some utility classes to a widget so you in the highlighted area over here we have added classes such as the the BG - light this class makes the program background color of the widget to light and in the text - primary this this is changing the test color to primary and etc so as you can see on the right the the container of the widget it has a nice-looking Styles applied so in the last section I am going to introduce the UI components library from the chimú framework so in disputer we provide a library of your components for the developers to use in their UI development so with version 1.0 we have covered many of the core or common UI components such as the the buttons drop downs improves radio buttons Chavez least etc and also the navigation components such as the nav and tabs and other common component components such as the model end of the card and besides the common UI components we are also working on providing more advanced components they are more tailored for his views Beauty requirements such as the image selector components and also the setting components and we are we are going to add more more mat or J as focused component components in the future so you may wonder how your components are styled so he spews builder we used the stout or the CSS in JavaScript way to write CSS so there are several benefits of taking this new approach the first one is using javascript to write CSS allow you to read logics and conditions within your CSS code and now you can also update the theme and at runtime I very easily and then the CSS styles are scoped so this will avoid any captures with class name conflicts and allow you to read CSS targeted to only the components or wages hour without worrying over reading the other styles and by the way I mean his experienced builder we used emotion GS as the third-party library right so let's take a quick look at the like how to use emotion to add additional CSS to your widget so units code at the top we define a function that returns a CSS string there simply added first a font size of 2.5 RAM and a test color based on the current count value from the components state if the comm value is greater than to the test color will be in green and the red if it is not so then to apply the styles you know Dom structure definition below we append the CSS styles as a prop to the power to the paragraph which is the P element enter emotion will take care of the rest of these add runtime to dynamically create a class a class with a unique name and we've calculated a CSS Styles wrap unit and this cost will be appended to the paragraph element on the fly so a quick note so please consider using the the UI components from Jimo library before trying any other UI libraries such as material UI or and design this many because our components are healthily with the FEMA framework so in order to have a consistent consistent kind of view I recommend you to use the components from the Gmail UI library so last we are going to show a very quick demo on the the core variables and you are components available right now so a quick tip is that you can visit these theme - builder from your local app or from the online a spoon is pierce a pewter app which you can preview all the core variables for example the colors and the sizes and etc verbose for Asian theme for example if you were to switch to it to add our theme so these show the variables from that thing so let's go back to a default and over here under this core components tab you can also preview all the core components over here for example the buttons dropdowns form elements navigation exertion and you can play around with the themes but it's just 19 different themes to preview those and you can have a quick purview on the 16 at West components available right now and we are thinking to add a storybook support which will be more powerful than the current component preview Buner over here to assist you more on your UI development work and ok that's pretty much it for the themes and your component session now to do it great thanks she way okay so you're probably wondering what's next well this was it was an intro session and we it was our first one exactly that's ever recorded so hopefully you've learned something new so what what do we recommend doing from here well we're gonna be doing another session it's called argyus experience builder building web solutions advanced topics and in that session we'll get more into masters actions triggers will talk about more data sources well we'll get into more little deeper dive into widget development and UI stuff and then your next call action is to download the developer edition just go to the developer start our kiss comm and look for experience builder and download developer edition and give us your feedback let us know what would you think by post and stuff and on GeoNet and then if you're new to react and typescript I know we briefly talked about it that would be sessions that we that we would need to create in themselves we're certainly not experts on that we obviously use it within ours so we know it but we're not obviously certified instructors on that but there's tons of documentation out there like how if we've learned it so if you're new to it we recommend learning it and and so you can implement it into your your logics for for widget development etc and with that we would like to thank you and and hopefully you learn something new and check out our other sessions thank you very much everybody thank you

Channel: Esri Events

Views: 13,743

Rating: 4.8769231 out of 5

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

Id: QG5jXCJi0pE

Length: 54min 56sec (3296 seconds)

Published: Mon Apr 06 2020