fdk-extension-bridge-javascript

The fdk-extension-bridge-javascript library helps you set up contextual items as a part of the header for extensions.

In this document, you will find significant information about how to setup this library, the different components you can use as a part of this library, and how to reset the library.

Setup FDK Extension Bridge Library

const { Extension, components } = require("@gofynd/fdk-extension-bridge-javascript");

let ext = new Extension({apiKey: "12345667890"});

Components

Buttons

Buttons are clickable elements useful for triggering any event.

Properties

label (Required property)

• It defines the text that needs to be displayed on the button.
• It accepts a value of type String.

disabled (Optional property)

• It decides if the button will be disabled. A disabled button will not be clickable.
• It accepts a Boolean value of true or false. By default, the value for this property will be false. It means, the button by default will not be disabled.

id (Optional property)

• It's an optional property that defines an ID for the button.
• It accepts a value of type String.

type (Optional proprty)

• It defines the type of the button.
• It accepts one of the two values - flat or stroke.

Sample code to include buttons

let btn = new components.Button(ext, {
    label: "save"
});

let unsubcribe_handler = btn.subscribe(components.Button.Actions.CLICK, (event) => {
    // your code
});
btn.dispatch();

Preview

---

Toggle Buttons

Toggle buttons are useful for switching between two different states.

Properties

activeLabel (Required property)

• It defines the text that needs to be displayed when the toggle is in an active state.
• It accepts a value of type String.

inactiveLabel (Required property)

• It defines the text needs to be displayed when the toggle is in an inactive state.
• It accepts a value of type String.

disabled (Optional property)

• It decides if the toggle button will be disabled. A disabled toggle button will not be clickable.
• It accepts a Boolean value of true or false. By default, the value of this property will be false. It means, the toggle button will not be disabled in its default state.

Sample code to include toggle buttons

let toggle = new components.ToggleButton(ext, {
    activeLabel: "Active",
    inactiveLabel: "Inactive",
});
let toggle_unsubcribe_handler = toggle.subscribe(components.ToggleButton.Actions.CHANGE, (event) => {
        // your code
});
toggle.dispatch({value: true});

Preview

---

Context Menu Item

A context menu item is useful for providing additional options for users.

Properties

label (Required property)

• It defines the text that needs to be displayed for the item.
• It accepts a value of type String.

id (Optional property)

• It's an optional property that defines an ID for the context menu item.
• It accepts a value of type String.

Sample code to include a context menu

let context = new components.ContextMenuItem(ext, {
    label: "Details",
});
let toggle_unsubcribe_handler = toggle.subscribe(components.ContextMenuItem.Actions.CLICK, (event) => {
        // your code
});
context.dispatch();

Preview

---

Breadcrumb

A breadcrumb is a navigational element useful for guiding users while using the extension. It helps the user understand the flow of the extension. It also serves as a guide to the user by pointing out the current page the user is currently viewing.
Breadcrumb is appeneded to the title of the extension separated by a /.

Properties

displayText (Required property)

• It defines the text that needs to be displayed as a part of the breadcrumb. This text will be appended to the title with the help of a separator /.
• It accepts a value of type String.

Sample code to include a breadcrumb

let breadCrumbs = new components.Breadcrumb(EXT, {
    displayText: "Export Data",
});
breadCrumbs.dispatch();

Preview

---

Tags

A tag is useful to provide an indicative badge to help the user understand additional information about the extension.

Properties

- text (Required property)

• It defines the text that needs to be displayed inside the tag.
• It accepts a value of the type String.

tagState (Optional property)

• It defines the state of the tag, i.e., whether you intend to display it as an information, an error, a success message, a disabled value, or a warning.
• It can take only one of the following values: info, success, warn, disable, or none. By default, the value of the state is info.

fill (Optional property)

• It decides if the background for the tag should be transparent.
• It accepts a Boolean value of either true or false. If the value is true, it will fill the tag's background with the color of the selected state. By default, the value is false which means it will have a transparent background.

Sample code to include a tag

let tag1 = new components.Tag(EXT, {
    tagState: "info",
    fill: false,
    text: "Public"
});
tag1.dispatch();

let tag2 = new components.Tag(EXT, {
    tagState: "error",
    fill: true,
    text: "Error"
});
tag2.dispatch();

Preview

---

URL Builder

A URL Builder is useful to generate the pages, blogs, collections URL of Fynd Platform with query and params.

Properties

- applicationId (Required property)

• It defines the Application Id for which you want to build the URL Builder.
• It accepts a value of the type String.

pageType (Optional property)

• It defines the type of the page.

pageParams (Optional property)

• It decides if the params for the page.

pageQuery (Optional property)

• It decides if the query for the page.

urlValue (Optional property)

• It decides if the url value for the page.

Sample code to include a tag

let urlBuilder = new components.UrlBuilder(EXT, {
    applicationId: "asdfghjkl"
});
urlBuilder.dispatch();

Preview

---

Reset extension bridge

ext.destroy()