Blocks are the "meat-and-potatoes" of your Frontly app. They make up the foundational structure of all your pages, and display the content you need for your users.
With a little bit of understanding of each block's core features and functions, you'll be able to share your data and collect your user inputs in little to no time. Start building your app up now by adding your blocks with the steps outlined below!
Adding a Block to Page
After creating your page, look to the header inside your page to choose from one of the many feature block options or click on the three dots (...) to view even more of them.
Choose from many more options from this modal based on your content needs. Blocks are grouped into different categories to help limit your selection.
Create a Block with AI
If you're looking for inspiration on how to structure your content or just wanting AI to do some of the heavy lifting for you, try creating a block or a series of blocks by clicking the 'Generate with AI' option.
Once you've selected the option, enter what you'd like to generate into the prompt. This function is open ended and can produce different results each time you enter the same prompt doing its best to remain accurate to your input. Feel free to click and drag any element of the generated block to modify it as you please.
Input:
Result:
Note that blocks created by AI, like any standard block, will only have the basic UI and styling elements set up for it. Set up for its data source, actions or conditions for it will still need to be configured manually from your page editor.
Overview of Primary Block Settings
Creating a block will introduce a whole suite of settings and options for you to customize. Here is a high level overview of all the clickable functions you see below:
Page: Clicking this transitions you out of the individual block setting and into the settings of your specific page.
The block you are editing. The label of this block will update after you've added a custom label to it from its 'More' settings.
Permanently deletes the block you're editing. Pressing the 'Delete' key on your keyboard will also achieve this. Think twice before doing so though!
Depending on the block selected, the Basics tab enables you to configure a range of different settings. Selecting your spreadsheet, configuring action, and adjusting fields are just some of the things you can toggle here.
The Filters tab is available only to specific Data Display blocks (Table, Kanban, Calendar, Table, Chart, Map, Custom). This tab enables you to set Visible or Hidden filters to your specifications. Additionally, the option to disable the block's search bar can be found here.
The More tab options also vary depending on the block, but you'll likely find settings relating to permissions here.
This is the Styling tab. All the styling features here from block padding, margins and background color can be found here as well as any block specific styling options. Experiment with these settings and watch them update in your editor in real time!
Additional Resources