<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP7S83N" height="0" width="0" style="display:none;visibility:hidden">
Tutorial

Add powerful file storage to your Superblocks app

This tutorial will show how to add our files component to your Superblocks app, enabling previews of virtually every file format, remote editing of Office files, and support to several cloud storage services.

Have your Superblocks app ready, and let's get started.

1. Add a Weavy Files component

Open the Add components panel in the Superblocks app editor and locate the Weavy Files component.

Drag the Weavy Files component onto your page canvas.

superblocks-components-smaller-2x

2. Set component properties

Once you've added your component to the canvas, it's recommended to set some properties on the component. The component is automatically adapted to the current theme you are using in Superblocks.

Content

  • Uid: Set a unique identifier that relates to both the page you are showing and the purpose of the component. For instance customer-files-{{Table1.selectedRowIndex}} if you want to relate it to each row in a table.
  • Display name: This is the readable name for the component. It's used when notifications are generated etc. You can set it to {{Table1.selectedRow.name}} Files to relate it to the row data in a table.

Event handlers

  • On Token Expired: Set this to simply run the GetWeavyToken Api. This will refresh the user access token when needed.
  • On Set Weavy Navigation: If you have set up Weavy notifications already, set this event to trigger the setPageNavigation event with the uid set to the uid property of the files component, for instance WeavyFiles1.uid.
superblocks-files-properties

3. Done!

The Weavy Files component should load instantly.

To give it even more power, set up Notifications to trigger updates when users interact with your component.

Note that this is fully working now and available for all your users if you want - rich file storage and preview support added, just like that

superblocks-files
Ask AI
Support

To access live chat with our developer success team you need a Weavy account.

Sign in or create a Weavy account