Building a Portal with UI Builder in Quebec - Live Coding Happy Hour for 2021-01-22

Topic: On this episode, join Andrew, Brad, and guest Maria Gabriela as we work on Quebec UI Builder! We will craft a page for our artifact program. Crack a beverage and come join us!

Useful Links:
Code Repository: https://github.com/ServiceNowDevProgram
Dev Blog: https://developer.servicenow.com/blog.do
SN Women: https://womennow.dev
Podcast with Maria Gabriela: https://omny.fm/shows/break-point/a-c...

About: Live Coding Happy Hour is a weekly show provided by the ServiceNow Developer Program. Each week join the Developer Advocate team along with guests who work on developing and enhancing real applications with unscripted and unprepared examples. See how experts at ServiceNow problem solve and learn new parts of the Now Platform.

Credits:
Hosts: Andrew Barnes, Brad Tilton
Guest: Maria Gabriela Waechter

Jump to:
00:00 Beginning of the stream
04:20 Beginning of the video (nice)
05:40 Introduction of beverages
06:50 Announcement, Quebec is in early access, CreatorCon speaker registration
08:37 Introduction to https://womennow.dev
09:35 Announcement for Quebec developer & Now Experience content
10:38 Intro to the new UI Builder
13:30 Open UI Builder.
14:20 Create an experience.
16:23 Open the new Experience in UI Builder.
18:15 Create an editorial calendar page.
19:58 Anatomy of UI Builder.
24:58 Look at the Component Library.
25:50 Add and configure a Simple List component to the editorial calendar page
29:00 Open the page in runtime to test
29:50 Event component panel
32:00 Create another page with a page property
33:14 Add a component to the page and map the page property to the component. We ran into some issues here when we used the Form component initially when we should have been using the Form - fields component to show the fields section of a form.
39:24 Add an event handler to the list component on the editorial calendar page so that when a list item is clicked it links to the form page created earlier.
42:24 Use a data resource
43:30 Create a GraphQL Data Broker. This is where you’ll use a GraphQL query that will then be able to consumed by a page.
46:58 Consume the GraphQL Data Broker as a Data Resource and pull it into the component.