Skip to main content

Lab 4 - Customer app with service scheduling using chat

Goal​

Now we want to update the existing customer app to have a new service page. The customer will receive an email notifying them of a service appointment request. The customer will access their app and examine the service page that is to be built. This will show service tickets that have been created for the motorcycle. The telematic event, an affected assembly, and a date picker will be available to the customer. The customer will select a date, and this will update the flash_service table. The following image provides an architectural diagram:

Customer app with service page

Update navigation menu with service item​

  • Create a new page to host the service appointment information. Select Pages > + > Page
  • This will create a page named page1.
  • Select page1, right-click, select Rename and change the page name to service.
  • Select the component navigationCustomer and in the Inspector/Right panel, create a new menu item using Menu items > +.
  • Edit the menu item to have a label of Service and a page set to service. You can also add an icon (e.g. wrench) to align with the previous menu item, reserve.
Service Menu Item

Use Assist to generate the service page​

With the Service page selected, open up Assist. Now we will prompt an application using the following example and accept any queries that need to be generated.

Generate a service app on the service page that uses @Retool Database and the flash_customer table to display the service appointment for the current_user.email. When the user double-clicks a table entry, open a modal that displays the table information allowing them to specify a date of service. This date of service will update the flash_service table, service_date column.

Test generated application​

  • Select the Service navigation menu item.
  • Confirm an entry is displayed.
  • Selecting an entry should cause the modal to appear.
Service Appointments
  • Select a date and select the Save Service Date button.
Schedule Service Date
  • This will then update the flash_service table with a date. Confirm by viewing the table.
Flash Service Update