Custom component
Build HTML/CSS/JS, React, Vue, Angular components
For very specific pages you can create your own custom Component based on HTML/CSS, React, Angular, Vue, or any other framework and integrate it into the Jet Admin interface. Writing your own custom JS/CSS/HTML has no limits in implementing any page you need.
To integrate your custom Component with Jet Admin data you can use the Jet Admin SDK library.
You can create your own Custom HTML components and pass values to them from anywhere else in the application via parameters. A short demo video on how to do this:
In this tutorial, we'll show you how to create a sample Custom Сomponent that you can, later on, extend to satisfy whatever needs you have.
A Custom Component uses Web Component specification to integrate any JS-based component to Jet Admin – this allows you to use any Frameworks and Libraries you like as long as you create them as custom Web Components. So it can be React, Angular, Vue. js-based components, or any other.
First, you need to create a Custom Component project where you can develop and test it. This project will be your playground for creating Custom Components. It will work the same way as on Jet Admin but will make your development easier so that you can use your favorite IDE and environment. To make it simpler, you can use some of our ready-to-use starter projects on GitHub or use them as a reference:
For example, here's an example of cloning React and preparing it for work:
git clone [email protected]:jet-admin/jet-flex-view-react-example.git
cd jet-flex-view-react-example
npm install
After you created your project and cloned an example, make sure it works by running this command (or any other you use):
npm run start

http://localhost:3000/
The project works fine, so you can start developing your Custom Component. But before that, read the following step if you need the Jet Admin API integration.
Consider the following limitation while developing:
- You can't use change URL inside Custom Component since component is embed inside Jet Admin view
- Consider incapsulating styles inside your view, not use global styles
To integrate your custom Custom Component with Jet Admin data and API, you can use Jet Admin SDK library. To start using it, you would have to install it first:
npm install jet-admin-sdk
To work with API and perform queries, the SDK needs to know which Project you are working with and your Access Token. When a Custom Component is uploaded to production, it will fetch these automatically, but for development, you need to specify it manually, as shown below:
import { getPublicApiService } from 'jet-admin-sdk';
if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
getPublicApiService().projectsStore.setCurrent('YOUR_PROJECT_UNIQUE_NAME');
getPublicApiService().authService.tokenLogin('YOUR_USER_TOKEN');
}
- YOUR_PROJECT_UNIQUE_NAME – can be taken from URL of your project on Jet Admin
That's it! You can now use Jet Admin API through PublicApiService. For example:
import { getPublicApiService } from 'jet-admin-sdk';
getPublicApiService().currentUserStore.get().subscribe(result => {
if (result) {
console.log('Current User is ' + result.username);
} else {
console.log('Failed to get Current User');
}
});