components are a core part of ui builder they're what we use to assemble the pages that chris just described just as a point of reference in the orlando release we shipped with six out-of-the-box components when quebec launches there will be over 100 components available within ui builder in terms of the different types of components we typically break them down into two buckets first we have the core atomic components these are things like buttons and drop down menus the other bucket of components is what we commonly refer to as the experience components these are the more complex components such as forms and lists to learn more about individual components please refer to the component library under the reference section of the developer site at developer.servicenow.com here you can get an overview of the component learn about the apis read through the usage guidelines and i've added a link to the site here in this slide next slide please all right component configuration components are configured via the configuration panel which appears on the right-hand part of the screen in ui builder this panel is comprised of three different tabs the config tab is where the page builder is exposed to all the different properties of that particular component the properties on the config panel have three different modes static mode is where the user manually sets the property to a static value or setting dynamic mode is when is used when the page builder wants this property to be dynamically set by such things as a client state parameter a page property or a data resource and lastly the page builder can also leverage a script to drive a component property next we have the styles tab styles tab is where the user can leverage css to override specific attributes of a component's styling and lastly events the events tab is where you set up the event mapping for this component i'll touch more on events in a couple of slides next slide please at the top right of the configuration panel you'll see a small eye icon clicking this icon exposes the component visibility section at the top of the panel as the name implies this is where you can bind the visibility of a particular component to a script or data next slide please the test value field within the component visibility section allows the page builder to quickly test the experience when this component is both visible next slide please as well as when it is hidden next slide please