Manage Reusable Content
Last updated
Last updated
© Bee Content Design, Inc. San Francisco, CA | Part of Growens
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 emptyRowsto 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.
