Create your own layout

Layout is a list of components that are displayed from top to bottom.

Define which components are part of your layout.

Set your layout with our drag&drop solution, which can be found in ⚙️ -> Developer settings -> Create custom layouts.

PlutoLayout drag&drop

You can drag a component to the bottom of the screen to the red area to remove it from to layout. Click on the plus button to add a new component to your layout.

Each time you make the change, you can go back to the home screen of your app to check how your new layout looks like. It updates right away. :)

Please be patient. At the time of writing, the code for drag and dropping is not optimised and each time you make a change, it will reload the newly created layout. This will slowdown your device for a few seconds until it loads all data from all chains to all components.

Since this is aimed at developers only, we do not want to waste time fixing this unimportant optimisation bug. Just be patient :)

Export

Once you are happy with your newly created layout, you can export it. Just click on the Export button on the top right corner.

PlutoLayout export

You can export both the QR code, or just copy the PlutoLayout link to your clipboard.

Register default layout

You certainly want to register your newly created and exported PlutoLayout as your default layout for your app.

Just go to PlutoFramework/Model/CustomLayoutModel.cs and replace the value of DEFAULT_PLUTO_LAYOUT constant:

public class CustomLayoutModel
{
    public const string DEFAULT_PLUTO_LAYOUT = "<put your layout here>";
    
    // ...

Registering multiple layouts

Registering multiple layouts is certainly possible. PlutoFramework is capable to hot-swap these layouts at runtime, which can be very powerful.

One example of such hot-swapping can be found ⚙️ -> Predefined layouts.

Feel free to create a similar page like this with your own layouts and offer them to your users.