This page discusses the ways that you can manage reusable content within the builder. There are different row management options, such as delete, edit, or display rows, available to you and your application's end users. Throughout this page, we will discuss these options and how you can implement them.
Note: To sync rows, visit the Implement Synced Rows page.
There is no limit to the number of rows passed to the builder in each array of custom rows.
However, the builder UI will only display the first 30 items (i.e., the first 30 rows in the array).
The rest of them will not show until the user performs a search that matches them. If the search matches over 30 items, the first 30 are displayed.
This filtering is applied to prevent performance degradation in the browser.
The search field allows users to narrow down the content shown after they select a list of custom rows.
The search is performed against all elements of the array (i.e., both visible and hidden), and the first 30 items (i.e., the first 30 rows in the array that match the search criteria) are shown.
All textual content included in the selected array – including image file names – is used to find a match.
The order of the JSON nodes in rowsConfiguration
defines the order in which the lists of custom rows will display in the drop-down. It also determines which list of rows will be used as default (selected) when the user clicks on the Rows tab for the first time during the session.
The first ordering factor refers to the type of row (empty, default, custom). That’s defined by how the following parameters are listed in rowsConfiguration:
emptyRows
defaultRows
externalContentURLs
You would list defaultRows
before emptyRows
to obtain the order shown in the following screenshot:
The order inside the externalContentURLs
node defines the order of the Custom rows.
In the above example configuration:
emptyRows
will be the first item in the drop-down and the default selection when clicking on the Rows tab.
defaultRows
will be the second item in the drop-down.
The lists of rows defined in externalContentURLs
will follow their ordering in the drop-down.
It’s up to you – the host application – to decide what’s available and in which order.
Note the following row type requirements when configuring your rowsConfiguration parameter:
emptyRows
and defaultRows
are not required.
This allows you to load just Custom rows through externalContentURLs
, if needed, controlling which rows end users can drag and drop into the builder.
The maxRowsDisplayed
parameter enables you to define the number of rows displayed under each user-created category in the application's sidebar, without affecting the "Empty" and "Default" categories. It directly influences the number of saved rows an end user sees when they click on a category in the sidebar.
You can set the maxRowsDisplayed
parameter in the rowsConfiguration
object in the Beefree SDK Configuration as follows:
The following section discusses how to configure the Saved Rows Management categories.
Accessing, and organizing saved rows is intuitive with Saved Rows Management. With this feature, there is an available action in the list of saved rows that your application can intercept to handle changes in this list itself. This means you can delete, rename, or re-organize your saved rows inside the builder.
Implementing Saved Rows Management Actions requires some development effort from the host application. This section outlines what you need to know for each action.
To get started, you will need to create a content dialog in your application configuration parameters. The content dialog method should be named onDeleteRow
and be nested under the contentDialog
object, as follows:
Following that, amend your rowsConfiguration
object with the additional parameters:
The handle
parameter to utilize in your onDeleteRow
handler from the previous step
The optional behaviors
parameter to set management permissions
Here’s an example:
When the onDeleteRow
method is called, utilize the 3rd parameter to obtain an argument containing the handle value of the row being requested, as well as the row metadata. Use the handle and the row’s metadata to determine which row should be deleted.
Finally, we can call the resolve
method, passing the value true
if you want to refresh the rows, or false
if you want to keep the side panel’s current listing.
To get started, much like with deleting rows, you will need to create a content dialog in your application configuration parameters. The content dialog method should be named onEditRow
and be nested under the contentDialog
object, as follows:
Following that, amend your rowsConfiguration
object with the additional parameters:
The handle
parameter to utilize in your onEditRow
handler from the previous step
The optional behaviors
parameter to set management permissions
Here’s an example:
When the onEditRow
method is called, utilize the 3rd parameter to obtain an argument containing the handle value of the row being requested, as well as the row metadata. Use the handle and the row’s metadata to determine which row should be edited.
Finally, we can call the resolve
method, passing the value true
if you want to refresh the rows, or false
if you want to keep the side panel’s current listing.
Saved Rows Management also provides errors and warnings for your application, so you can handle all cases gracefully.
You can call the reject
method, passing the message you want to display.