Custom screens: Server side rendering

ℹ️ MotionTools supports server side rendering in the Driver app through what we call Custom screens.

 

Overview

Custom screens make it possible to design & add new screens to the MotionTools Driver app that are not standard to the app. These don’t have to be isolated or static — Custom screens can open other custom screens and can also open links to URLs you specify.

 

You can see a few examples of what can be built with Custom screens below:

Custom_screens_variations_2_.png

The examples above focus on a use case that revolves around providing a driver with analytics & statistics, but this doesn’t have to be the case — feel free to explore and to come up with new use cases for your Custom screens feature.

The entry point in the driver app to all custom screens is the side menu. See the screenshots below that showcase an opened side menu that has an 'Analytics' item. Clicking the 'Analytics' item opens a custom Screen that displays various analytics about the tips a driver has collected recently.

Custom_screen_open_flow_1_.png

 

High level description

Broadly speaking, Custom screens work in the following way:

  • The MotionTools platform defines a schema that can be used to serve custom screen data to the Driver app — See API Docs.
  • You will need to setup on your backend an endpoint capable of generating payloads that respect the schema.
    • If you don’t have a backend, serverless tools are also suitable (e.g AWS Lambda or Google Cloud Functions).
  • When a driver opens a custom screen in the driver app, the MotionTools backend requests the payload for the respective custom screen from your backend.
  • The payload generated by your backend is validated by the MotionTools backend and if valid, it forwards it to the driver app ⇒ The custom screen gets rendered.
  • Connecting the MotionTools backend to the endpoint that builds the payload for the custom screen is done via the Dashboard, by admins of your organization.

Various details have been left out from the above summary, please check the articles in the Deep dive section for a more detailed description.

 

Deep dive into details

Since Custom screens are one of our more advanced topics, we have broken it down in multiple articles & examples:

  1. How custom screens work
  2. Configure a new custom screen via the dashboard
  3. Implement a simple endpoint to return a static custom screen

Other resources

 

FIN

We are thrilled to see what exciting features you will build using custom screens, and if you encounter any issues feel free to contact our support.

Happy tinkering! 🛠️

▶️ Go to Part 1: How custom screens work

 

Was this article helpful?
0 out of 0 found this helpful

Articles in this section