Implement Hosted Saved Rows

This feature is available on Beefree SDK Core plan and above.

Overview

With Hosted Saved Rows, you can provide your end users with the option to save and manage reusable content directly within the builder. Hosted Saved Rows can be activated through a toggle within the Developer Console, which makes it an excellent option for those who are interested in a fast implementation of Saved Rows. Once you toggle this feature on, your end users will be able to save the rows they create within the builder, and reuse them easily in the future. They can also perform actions to manage the rows that they save, such as renaming them, deleting them, categorizing, or recategorizing them. This page covers the steps you need to take to successfully implement Hosted Saved Rows.

The following video tutorial discusses what Saved Rows are, how reusable content can support your end users throughout their content creation journeys, and how you can implement Hosted Saved Rows in your application.

Enable Hosted Saved Rows

To enable Hosted Saved Rows for your application, follow these steps:

Log in to the Developer Console.
Navigate to the application you'd like to configure Hosted Saved Rows for.
Click on Details.
Navigate to Application configuration and click View more.
Scroll to the Saved Rows section.
1. Toggle on the Hosted on the Beefree SDK Infrastructure option.
2. Read the pricing information in the popup closely, because additional fees may apply.*
3. If you'd like to proceed, confirm you read and understand the pricing to activate the feature.

Important: Keep in mind that charges apply for saved rows that are hosted not only in your production applications, but also for your development applications.

*Hosted Saved Rows have the following pricing structure:

Pricing Considerations

Free

Essential

Core

Superpowers

Enterprise

Allotment

Not available

100 Hosted Rows

250 Hosted Rows

1000 Hosted Rows

Price for extra unit

$0.35/Hosted Rows

$0.25/Hosted Row

$0.20/Hosted Row

Note: Visit our Usage-based fees article to learn more about Hosted Saved Rows pricing.

Once you've successfully enabled Hosted Saved Rows in the Developer Console, you'll access the following:

Rows saved by your application's end users will be stored and hosted in the Beefree SDK storage option.
End users can save rows directly to the hosted infrastructure and retrieve them as needed.

User Interface and End User Experience

Once you successfully enable Hosted Saved Rows within the Developer Console, your application's end users will have access to a new Save icon for each row, and other options for managing the rows they save.

The Hosted Saved Rows UI includes the following experience for end users:

End users can save a row using the Save icon.
They have the ability to name and categorize rows.
They can edit a row's name or category and save those changes.
End users can decide to reuse or delete rows through the Rows tab in the side panel.
They can also use the vertical three dots to add and manage categories.

Reference the Hosted Saved Rows end user documentation for more information on the end user steps and experience.

Limit the Number of Hosted Saved Rows by UID

You can limit the number of Hosted Saved Rows an end user can save by their unique UID. The maxHostedRowsLimit parameter lets you define the maximum number of Hosted Saved Rows an end user can create in your Beefree SDK configuration. Use this parameter to establish predictable saving patterns for Hosted Saved Rows within your application.

Why use maxHostedRowsLimit?

Customize at the user level: Set unique limits per user ID (UID), giving you flexibility to adapt quotas based on specific needs or plan tiers.
Control usage and make costs more predictable: Prevent scenarios where users save large numbers of rows, leading to unexpected usage-based charges. By setting a clear upper limit, you can better forecast and manage your costs.
Differentiate your pricing plans: Create customized experiences for different user segments. For example, offer 3 saved rows to free-tier users and unlock higher limits for premium users. This allows you to align features with your pricing model and incentivize upgrades.

Code Snippet Example

The following code snippet shows an example of how to use the maxHostedRowsLimit parameter in your beeConfig file.

const beeConfig = {
  rowsConfiguration: {
    // Define custom row behavior or limitations here
    // e.g., maxColumnsPerRow: 2,
  },
  maxHostedRowsLimit: 10, // Maximum number of hosted saved rows the user can save
};

In this example, the user can save up to 10 Hosted Saved Rows. Beefree SDK will block attempts to save more than this limit.

Custom the Toast Message

When you limit the number Hosted Saved Rows for an end user, they will see a toast message on the lower right-hand side of the screen when their limit is reached. The default message for this toast message is the following:

Title: Saved rows limit reached
Description: You've saved 5 of 5 rows. To save a new row, please delete an existing one first.

The following image shows how this default toast message looks within the user interface.

You can use Custom Languages to customize both the title and description text within this message. For example, if you have more of playful brand tone within your application, and want to adjust the message accordingly, you can.

In the following code snippet, the default text was changed to the following:

Title: Whoa there, design superstar!
Description: You’ve hit your 5-row max—time to let one go before saving another.

This was achieved by adding the translations object to the beeConfig, and then adding the strings within the object with the new text.

Code Snippet of Example Toast Message Customization

var beeConfig = {
  uid: uid, // [mandatory]
  container: "bee-plugin-container", // [mandatory]
  language: "en-US",
  trackChanges: true,
  mergeTags: mergeTags,
  translations: {
    "hosted-content": {
      "save-row-max-limit-error-toast-title": "Whoa there, design superstar! ", // Title text
      "save-row-max-limit-error-toast-description": "You’ve hit your 5-row max—time to let one go before saving another.", // Message text
    },
  },
  saveRows: uid === "Admin" || uid === "Designer",
};

Configure Advanced Permissions

Hosted Saved Rows includes advanced permissions to control how rows and categories are accessed and managed. These permissions allow you to define user capabilities, such as editing or deleting rows.

Available Permissions

The permissions you can control for Hosted Saved Rows through Advanced Permissions are the following:

canDeleteHostedRow: Allows or prevents deleting hosted rows.
canEditHostedRow: Enables or disables editing of hosted rows.
canManageHostedRowCategory: Controls whether end users can manage row categories.
canAddHostedRowCategory: Determines if end users can add new categories.

Permission Behavior

Keep the following behaviors in mind when setting advanced permissions:

If both canDeleteHostedRow and canEditHostedRow are set to false, the row menu will be hidden.
If both canManageHostedRowCategory and canAddHostedRowCategory are set to false, the category management menu will be hidden.

Example Configuration

The following configuration displays an example of the rows object inside of advancedPermissions:

{
...
advancedPermissions:{
  ...
  rows:{
    behaviors: {
        canDeleteHostedRow: false,
        canEditHostedRow: false,
        canManageHostedRowCategory: false,
        canAddHostedRowCategory: false,
      },
    ...
  },
  ...
  }
...
}

Making Saved Rows Available to Select Users

Once Saved Rows is enabled globally in the Developer Console, you can disable it for specific users using the saveRows parameter in the beeConfig document. This lets you control access based on subscription plans, feature purchases, or beta testing.

Take the following step to disable access for specific users:

Set saveRows to false for users who shouldn’t have access.

The following code provides a simple example of how to add the saveRows configuration parameter and set it to false to make the feature unavailable to select users.


const beeConfig = {
    uid: 'dev-user',
    language: 'en-US',
    ...
    saveRows: false // boolean
    ...
}

Default Behavior

The following image shows the save icon when the end user clicks on the row.

Hiding the Save Icon

The following image does not show the save icon when the end user clicks on the row. This behavior occurs after adding saveRows to your beeConfig and setting it to false.

Removing the Rows Tab for Select Users

Similar to how you may want to restrict which end users can save rows based on subscription type, plan type, and so on, you can also control which users have access to the ROWS tab within the builder altogether. By default, the ROWS tab is available within the builder.

You can remove the ROWS tab by:

Add the defaultTabsOrder parameter to your beeConfig and set it to: ['content', 'settings'] or ['settings', 'content'].

Note: The only difference between these two options is the order in which they will appear in the builder.

Keep in mind the defaultTabsOrder is a string array (string[]).

The tab order represented in the snippet below with content first and settings second, results in the visualization displayed in the image after.

defaultTabsOrder: ['content', 'settings']

In the following image, the ROWS tab is no longer available to the end user. In the following image, the ROWS tab is no longer available to the end user and the order of the tabs are Content first and Settings second.

The tab order represented in the snippet below with settings first and content second, results in the visualization displayed in the image after.

defaultTabsOrder: ['settings', 'content']

In the following image, the ROWS tab is no longer available to the end user and the order of the tabs are Settings first and Content second.

Reference the Hosted Saved Rows Webinar to learn more about other customizations that are compatible with Hosted Saved Rows. The webinar discusses the following topics: