# Initialize Edit Single Row Mode

{% hint style="info" %}
This feature is available on Beefree SDK [Core plan](https://developers.beefree.io/pricing-plans) and above. Upgrade a [development application](/beefree-sdk/getting-started/readme/development-applications.md) at no extra charge to explore features from higher plan tiers. **Note:** Usage on a development application still counts toward [usage-based fees](https://devportal.beefree.io/hc/en-us/articles/4403095825042-Usage-based-fees) and limits.
{% endhint %}

## How it works <a href="#how-it-works" id="how-it-works"></a>

Our builders offer ready-to-go rows to your end-users, which provide both structure and content to create contents faster. With Edit Single Row mode you can offer an easier way for your users to modify a single row with a tailored UI built to edit the row structure, content, and style settings without worrying about messing up with the overall design of the email campaign, landing page, or pop-up.

Edit Single Row mode complements the [Saved Rows](/beefree-sdk/rows/storage/self-hosted-saved-rows.md) as it allows a complete control over the content of individual rows (e.g. the footer that requires to be updated) without the need to intervene into a full template, this will help you in implementing a more effective way to manage libraries of Saved Rows with a streamlined design process.

### **Initializing the editor in Edit Single Row Mode**

```javascript

type ClientConfig = {
  workspace?: {
    editSingleRow?: boolean
    // ....
  }
  // ....
}

const beeConfig: ClientConfig = {
  workspace:{
    editSingleRow: true
    // ....
  }
  // ....
}


// Create the instance 
function BeePlugin.create(token, beeConfig, (beePluginInstance) => { 
  //.... 

  beePluginInstance.start(template, { shared: false })
}

```

When a builder application is initialized with this mode enabled the UI will show to the user only properties that pertain to editing a single row, therefore:

* the options to insert custom rows, saved rows, or new default rows are disabled,
* the **Settings tab** is unavailable, as those properties are specific to the entire document,
* when a row is selected on the editing stage, the action to **Delete**, **Duplicate**, **Comment**, **Save** are not available.

<figure><img src="/files/jvlaDnbHVuLYUgrBwdcu" alt=""><figcaption></figcaption></figure>

## Implementing the Save action <a href="#implementing-the-save-action" id="implementing-the-save-action"></a>

The following describes the recommended workflow to implement the Save action in your host SaaS application when the Single Edit Row mode is enabled.

In case your application uses the default [Toolbar](/beefree-sdk/server-side-configurations/server-side-options/toolbar-options.md), you can leverage the save button to trigger the sequence of action to correctly save the row.\
The workflow is the same as the one documented in [saving-rows-workflow-for-developers](https://github.com/BeefreeSDK/beefree-sdk-docs/blob/main/rows/reusable-content/sync/broken-reference/README.md), in short :

1. The user clicks on the save button
2. A contentDialog of type saveRow will be triggered.

In case your application doesn’t use the default Toolbar, you can now use the dedicated [saveRow()](https://docs.beefree.io/beefree-sdk/rows/reusable-content/sync/pages/0qyMkGi6xKb3Zb3FhjGU#beeinstance.saverow) instance method to programmatically trigger the same row-saving flow as the default Save button:

* Call [beeInstance.saveRow()](https://docs.beefree.io/beefree-sdk/rows/reusable-content/sync/pages/0qyMkGi6xKb3Zb3FhjGU#beeinstance.saverow) from your custom UI element.
* The [onSaveRow](/beefree-sdk/getting-started/readme/installation/methods-and-events.md#onsaverow) callback will be triggered with the row JSON.

```javascript
myCustomToolbarButton.onClick(() => beePluginInstance.saveRow())
...

onSaveRow: function (rowJson) {
    myCustomApi.saveRow(rowJson)
},
```

### Example:

```javascript

myCustomToolbarButton.onClick(() => beePluginInstance.save())
...

onSave: function (json, html) {
	myCustomApi.saveRow(json)
},

```

* Listening to the [onChange](/beefree-sdk/getting-started/readme/installation/methods-and-events.md) event. It will receive the updated full message JSON which again can be saved as a Saved Row.

### Example:

```javascript

onChange: function (json, response) {
	myCustomApi.saveRow(json)
},

```

## **Merging saved rows in existing messages**

An effective way to update saved rows across multiple templates is by [implementing the save action](/beefree-sdk/rows/reusable-content/create/save/implement-self-hosted-saved-rows.md) in combination with the [Content Services API](/beefree-sdk/apis/content-services-api.md), to handle a row update across multiple existing templates.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.beefree.io/beefree-sdk/rows/reusable-content/sync/initialize-edit-single-row-mode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.