Customising the layout of widgets on an App Interface
Overview
In Rayven, once widgets have been added to an interface (via the selection of Frontend nodes in the Workspace), the layout, size, and positioning of those widgets are controlled directly within the App Interface. This allows Application Users with the appropriate permissions to create a clear, functional, and visually coherent user experience by dragging, resizing, and arranging widgets to suit their needs.
Customising Widget Layouts on the Interface
Widget layout customisation occurs directly in the App Interface (not in the Workspace). Once the widgets are available (because the relevant Frontend nodes have been selected in the Interface configuration), users with layout permissions can:
-
Drag and reposition widgets anywhere on the interface grid.
-
Resize widgets by dragging from the bottom-right corner.
-
Preview changes live to ensure usability and visual clarity.
Who Can Edit Widget Layouts?
Only Application Users with one of the following roles and who have been granted Edit Interface permissions can make layout changes:
-
Super Admin
-
Admin
-
Customer Admin
-
Editor
These permissions are set at the user level in the Application Users configuration, not at the User Group level.
How Widget Layouts Work Across Users
-
Shared layouts per User Group: All users in the same User Group will see the same interfaces and the same widget layouts on those interfaces.
-
To show different layouts to different users, create additional interfaces and assign them to different User Groups.
-
Users can belong to multiple User Groups, allowing them to access multiple interfaces with different layouts depending on the group’s configuration.
Best Practices for Widget Layouts
-
Use a consistent page width across interfaces
Maintaining uniform page width helps create a cohesive experience, especially when users navigate between multiple interfaces. -
Test for different screen sizes
Always preview interfaces on common screen sizes (desktop, tablet, etc.) to ensure usability and layout integrity. -
Plan around your widget types
If using pre-built widgets, group related ones logically and arrange them with appropriate spacing. If using a UI Code widget:-
Consider whether it is acting as a full-page experience (e.g. a custom interface with its own layout) or if it is meant to sit alongside other widgets.
-
When combining UI Code widgets with pre-built widgets, be mindful of how each fits into the overall visual and functional flow.
-
-
Avoid layout conflicts
A large UI Code widget may render its own navigation or container logic. In these cases, avoid placing other widgets nearby unless the interaction between them is well-defined.
Summary
Rayven gives you full flexibility to visually design your App Interfaces by arranging and resizing widgets directly within the live application. These layouts are controlled by Application Users with layout-editing permissions and are shared across the User Group. For different layout needs, configure additional interfaces and User Groups accordingly.
FAQs
Can I change widget layout in the Workspace?
No. Layout changes are made directly in the App Interface by users with edit permissions. The Workspace is used only to define which widgets are available per interface.
Do all users see the same layout?
Yes—if they are in the same User Group. All users in a User Group will see the same interface layout. To show different layouts, create a new interface and assign it to a different User Group. Note: Users can be added to more than one User Group.
Can I lock the layout so users can’t change it?
Yes. By default, users cannot edit widget layouts. Only users who have been explicitly granted the “Edit Interface” permission can rearrange or resize widgets. If you want to restrict layout changes, simply leave this permission unset.
Will my layout changes affect historical data?
No. Layout changes do not impact the data itself—only how it is displayed on the interface.