# Contextual Save Bar

> Show or hide the App Bridge contextual save bar in a Shoplazza App, and configure its save and discard buttons for forms with unsaved merchant changes.

The contextual save bar provides merchants with options to save or discard their modifications to a form on the page once they have completed the changes. Additionally, this component is displayed during the creation of new objects, such as products or customers.

## Setup

Create an app at entry file.

```javascript
// Embed App entry file
import { app } from 'shoplazza-app-bridge';

app.init();
```

## Display

Show or hide a contextual save bar.

```javascript
import { contextualSaveBar } from 'shoplazza-app-bridge';

contextualSaveBar.show();
contextualSaveBar.hide();
```

## Update Options

You can modify the options at any time. If the contextual save bar is visible, the UI will be updated immediately.

```javascript
contextualSaveBar.setSaveAction({
  type: 'primary',
  disabled: false,
  loading: false,
  text: 'Save',
  onClick: () => {
    // Do somethings
  }
});
contextualSaveBar.setDiscardAction({
  type: 'default',
  disabled: false,
  loading: false,
  text: 'Cancel',
  discardConfirmationModal: true,
  onClick: () => {
    // Do somethings
  }
});
```