Introduction to Google App Maker Part 4 of 5

Build and style the service desk app ui using a responsive template. Connect a tickets data model with date, status, and title fields and preview the interface.

Add a material design ui button in Google App Maker. Configure its on-click event to create a new record in the tickets data source with default fields.

Design and finalize a ticket user interface in Google App Maker by selecting relevant fields, previewing interactions, and configuring a floating action button, date formatting, and data binding.

Demonstrate auto populating fields before create using on before create events and active user data, then build a ticket details popup with a fill content form for edits and notes.

Modify the fab mini add button in Google App Maker by editing the custom action code to create a new ticket record and display the ticket details popup.

Modify the tickets page to edit a record by using pop-up forms, show and hide the ticket detail window, and repurpose the delete action to reopen the ticket for editing.

Explore implementing the user picker in Google App Maker by adding a directory model, binding it to the tickets datasource, and configuring the assigned to field with security settings.

Consolidate fields into a single row with horizontal panels, equal spacing, and margins; arrange date, status, and related fields using fill parent layout for a clean, even presentation.

Learn to add a description text area with widgets, adjust the layout, and bind the description field to the data source via the binding path for tickets.

Explore how to relate records in Google App Maker by modeling tickets and notes, enabling many users to add notes to one ticket via a notes popup.

Explore the finished module 4 app, create tickets, add notes via pop-up forms, and navigate the one ticket, many notes relationship.

Select the panel, set the data source to tickets, and apply padding and vertical fill to build the note popup base, with a close action to hide it.

Drop a horizontal panel, insert a textarea bound to note, and add a send button. Bind the button to create a new item via the tickets notes relation.

Add a list widget beneath the horizontal panel, connect it to the tickets: no relation data source, and set rows to vertical with padding for the notes popup.

Learn to style the list row in Google App Maker using CSS, applying borders, colors, margins, and border radius with hexadecimal color codes and comments to see live effects.

Drop and bind a label to text, build a horizontal panel with margins and spacing, bind date and created by fields, and add a right-aligned delete button with an icon.

Learn to add a button on the tickets page that opens a notes popup, style the panel, adjust margins, and wire the on click to display notes.