Configure a new custom screen via the dashboard

ℹ️ This article is Part 2 of Custom screens: Server side rendering.

 

Add a new custom screen in the dashboard

To add a new custom screen entry in the side menu of the MotionTools Driver app, first you need to configure it via the Dashboard.

To do so, login with your admin account, then navigate to Settings > Custom screens.

Screenshot_2022-08-16_at_17-56-59_Advanced_Dispatch.png

Here, click the Create new screen button.

Screenshot_2022-08-16_at_18-08-08_Advanced_Dispatch.png

In the dialog, perform the following:

  • Enter the URL of the endpoint that will build the custom screen payload on your backend.
  • Enter the English name of the custom screen. This is the string that will show in the side menu of the app. Optionally, you can add translations for all the locales enabled for your account — if the user of the Driver app will use a different language than English on their device, the name of the custom screen button will use the translated value.
  • Enable the custom screen using the toggle (this can also be done later).
  • Optionally: check the Embed user profile fields in JWT Token. See details here.

Once you have configured your settings, click Save. After saving, you will be presented with the public key that you can use to verify the request MotionTools launches to your backend when a custom screen gets opened — details here.

Screenshot_2022-08-16_at_17-58-04_Advanced_Dispatch.png

Once the public key is saved, click Close.

💡 Don’t worry if you forget to copy the public key. You can always access it by opening the custom screen configuration once again.

Screenshot_2022-08-16_at_17-58-12_Advanced_Dispatch.png

You are now back in the list of configured custom screens, and your new screen is displayed in the list. Since we have already enabled it, it will also display in the driver app as seen below.

Frame_4_1_.png

However, if the user would now attempt to open the 'Tips' Custom screen, it would show an error as the backend is not set up just yet.

Screenshot_20220816-184259_1.png

In part 3, we will setup a simple backend that returns a few static components that would then render in our custom screen.

▶️ Continue to Part 3: Implement a simple endpoint to return a static custom screen

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

Articles in this section