ui builder is one of the most exciting now platform capabilities in the quebec release this is a what you see is what you get style builder that gives you the power to build world-class experiences it has a modern layout system that removes many of the limitations from the legacy layout engine essentially if you can do it in css you can likely do it in ui builder giving you full control over how data is displayed now there's a ton of depth here so my hope is to guide you through some of the major features of ui builder and touch on a few things that make it so special ui builder is broken up into three main sections this left column here is the page management panel which has a handy page drop down that gives you quick access to all of the different pages associated with your experience below that we have the variance section which provides the ability to craft versions of your page that will be accessible to different audiences so perhaps you'd have a simple version for some users and a more detailed view for others below that we have our content panel which offers hierarchical navigation to all elements of your user interface you can interact with any aspect of this content tree whether it's a container a component image or text and you'll notice that element is highlighted in the center section we call the stage the stage allows you to interact with all aspects of your user interface in a rendering that will closely resemble the end user experience this allows you to rapidly iterate your page design and experiment with layout options dynamically within the stage i can quickly add new elements to the page using a little plus sign that appears though this can also be performed via the content navigator on the left if you'd prefer let's say i want to add some content to the title up top all i have to do is press this little plus sign and i'm presented with the component library that contains over 100 out of the box components that range from everything from a basic image or a text component to sophisticated things like embedded kpis interactive forms and embedded virtual agents in my case all i'm seeking is an image so i'll just search and add the image component which will come pre-populated with a placeholder image we can use for our mock-up now that we've got the foundation for our page let's check out the customization options available on the third major part of ui builder the configuration panel this panel is context sensitive and will vary based on what you have selected in the stage though it will often provide you the same three tabs config styles and events config gives you a range of options to control the selected component so for instance if i want to change this data visualization component to show a pie chart of travel request urgency instead of just showing the raw number of requests i can change the visualization type here to vertical bar and then i can group by urgency for our image i want to change it to my specific app image and control the size i'll first use the config panel to specify my image url then i can either use some of the pre-built image config options or navigate to the next tab styles to directly control it via css i'll set a static width here and you'll notice the effect of our changes reflect immediately lastly we have the events tab which can transform your page from static to dynamic we could for instance select our button up top and wire it up using an event handler to initiate a new travel request there's even a more in-depth data section accessed via this bottom left button that gives you access to all the data in your instance which you can then reference within your experience as you can see there's a ton of depth here but before we wrap let me just show you one of the most powerful aspects of ui builder the experience settings within this menu we provide the ability to control branding and theming meaning you can create a custom theme that applies to your that aligns to your brand aesthetics and have that cascade to all elements of your site with this i can quickly apply font color and even sophisticated ui tweaks by just selecting a theme to show this in action here's what the preview looks like of our current work in progress workspace using the default theme and now here's that same page with our custom theme applied a significant improvement made by just selecting the theme allowing me to ensure consistency across pages without having to style individual elements as you just saw ui builder gives you the ability to build beautiful functional user interfaces that will help you achieve the end user experience you desire faster this tool is a fantastic platform through which developers of different skill levels can collaborate for instance a citizen developer can create the foundation of an app within app engine studio and then hand that off to a pro developer to finish off with a stellar experience pro developers can also build custom components that fit your business's needs making them available in the same component library as our out of the box components for long term reuse the components are a key aspect of ui builder which is why we've provided over a hundred of them out of the box to help you with a great deal of the most common user experience needs thanks for checking out ui builder and be sure to visit our official documentation to learn more