Skip to main content

Create Customizable Extensions

In this section, you'll find the steps to create Customizable Extensions.

Introduction

In the context of StackSpot, a Customizable Extension allows you to create a new page within the StackSpot EDP Portal. For this, the Platform provides an SDK that enables the development of personalized pages, fully integrated into the StackSpot EDP environment.

The Extension facilitates integration with other tools, offering a centralized and personalized experience for developers.

warning

  • The entire implementation and management of the Extension is the sole responsibility of the client.

  • If an Extension presents a security incident identified by StackSpot, it may be deactivated at any time.

A Customizable Extension can be created at two levels:

Organization: everyone who is part of an Account will be able to view the registered Extension.

Workspace: the Extension will be published in all Workspaces.

The person responsible for the Organization must create and publish an Extension in the StackSpot Account Portal. After that, the Extension will be available in the main menu of the Organization or the Workspace menu and can be used.

Create Extension Project

StackSpot provides an SDK that can be used to create Extension projects.

Required Libraries

To build a StackSpot extension, the following libraries are required:

  • React
  • Citric: StackSpot's Design System.
  • Portal Theme: theme for the Design System.
  • Portal Translate: internationalization mechanism.
  • React Query: global network state manager.
  • Styled Components: for styling components.
Additional Information

The libraries Portal Translate, React Query, and Styled Components must be included in the project, but their use is optional.

  • Citron Navigator: if your extension has multiple pages, use the Citron Navigator, an internally developed navigator for React.

  • Portal Components: a set of components used by all StackSpot Portals built on Citric. Use it only if you need some of the components from this library.

Now, check how to install a library in a web project:

Step 1. Install the SDK using the following command:

pnpm add @stack-spot/portal-extension

You can also use npm or yarn.


Step 2. To expose your project as an Extension, insert the following component into your entry file:

import { StackspotExtension } from '@stack-spot/portal-extension'
export const App = () => (
  <StackspotExtension>
    {/* Your content goes here */}
  </StackspotExtension>
)

Done!

danger

You must have permission to create an Extension, available for Account Holders and Account Admins.

Create Extension in the Portal

Step 1. Access the StackSpot Account Portal and then click on the 'Organization' menu;

Step 2. In the 'StackSpot EDP' section, access the 'Extensions' subsection;

Step 3. Click the 'Create extensions' button;

Step 4. Fill in the following fields:

  • Name

A slug is suggested when the name field is filled. If you want to change the slug, click the 'Edit' button.

  • Level: choose between Organization or Workspace.

  • Description: this is an optional field.

  • File: upload the file that will be your Extension in zip format.

This file will go through a security scan process. If it does not comply with the security policy, it may be deleted.


Step 5. Click the 'Create' button.

Done, your Extension has been created. Now you need to activate it.

Activate or Deactivate an Extension

Activate an Extension

To activate an Extension, follow the steps below:

Step 1. In the row of the Extension you created and want to activate, click the icon that indicates more options;

Step 2. Click the 'Activate' button.


Done, you have activated an Extension. Now it can be used in StackSpot.

Deactivate an Extension

To deactivate an Extension, follow the steps below:

Step 1. In the row of the Extension you want to deactivate, click the icon that indicates more options;

Step 2. Click the 'Deactivate' button.

Done, you have deactivated an Extension.

Edit an Extension

You can edit an Extension while it is active, but the slug cannot be changed. To edit, follow the steps below:

Step 1. In the row of the Extension you want to edit, click the icon that indicates more options;

Step 2. Click the 'Edit' button;

Step 3. In 'Edit extension', edit one or more fields:

  • Name
  • Level
  • Description
  • Replace file

Step 4. To complete the editing, click the 'Edit' button;

Done, you have edited an Extension.

Remove an Extension

It is possible to remove an Extension, but all its versions will also be removed from StackSpot EDP. To do this, follow the steps below:

Step 1. In the row of the Extension you want to remove, click the icon that indicates more options;

Step 2. To confirm the removal, click the 'OK' button.


Done, you have removed an Extension from the Portal.