Search…
Custom component
Custom component overview
What is a Custom Component?
For very specific pages you can create your own custom Component based on React, Angular, or any other framework and integrate it in 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.
Create a Custom Component
In this tutorial, we'll show you how to create a sample Flex View component which you can, later on, extend to satisfy whatever needs you have.
1. Create your FlexView component project (playground) or clone an example
A Flex View 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 FlexView project where you can develop and test it. This project will be your playground for creating FlexView. It will work the same way as on Jet Admin but will make your development easier so that you can use your favourite 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:
1
git clone [email protected]:jet-admin/jet-flex-view-react-example.git
2
cd jet-flex-view-react-example
3
npm install
Copied!
2. Run your project
After you created your project and cloned an example, make sure it works by running this command (or any other you use):
1
npm run start
Copied!
http://localhost:3000/
The project works fine, which means that you can start developing your FlexView. 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 FlexView since component is embed inside Jet Admin view
- Consider incapsulating styles inside your view, not use global styles
3. (optional) Set up Jet API integration
To integrate your custom FlexView with Jet Admin data and API, you can use Jet Admin SDK library. To start using it, you would have to install it first:
1
npm install jet-admin-sdk
Copied!
To work with API and perform queries, the SDK needs to know which Project you are working with and your Access Token. When a FlexView is uploaded to production, it will fetch these automatically, but for development you need to specify it manually as shown below:
1
import { getPublicApiService } from 'jet-admin-sdk';
2
3
if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
4
getPublicApiService().projectsStore.setCurrent('YOUR_PROJECT_UNIQUE_NAME');
5
getPublicApiService().authService.tokenLogin('YOUR_USER_TOKEN');
6
}
Copied!
- 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:
1
import { getPublicApiService } from 'jet-admin-sdk';
2
3
getPublicApiService().currentUserStore.get().subscribe(result => {
4
if (result) {
5
console.log('Current User is ' + result.username);
6
} else {
7
console.log('Failed to get Current User');
8
}
9
});
Copied!
4. Upload your FlexView to Jet Admin
Once you're finished with your FlexView or just want to test it in a real application, you need to upload it. Build your project first:
1
npm run build
Copied!
Usually, it will create your build files in dist folder, but it can differ for your environment. To upload your FlexView to Jet Admin, you need to upload a .zip file with your build files. Go to dist folder and compress all the contents to a single .zip file.
Now go to Jet Admin and create Custom Component as shown below.
You will need to specify the following settings and click the Save button:
- Compiled custom element – zip file containing your build files of FlexView.
- Custom element tag name – tag name that you used for Web Component inside your FlexView project. Should pre prefixed with "jet-" and has dash-case. Also each of your FlexView should have unique tag names across your Jet Admin project.
- Files to include into page – in order for your FlexView to work JS and maybe CSS files should be included. You should check which files from your zip files should be included. The order of loading can be changed. These files will be included only once when FlexView should be displayed and after inclusion they must defined custom element with tag name the same as you specified for Custom element tag name.
That's a wrap. Feel free to test your FlexView now.
If you want to update it later, you can upload a new .zip file inside Custom Component.
Set Custom Component Inputs
You can specify Inputs to pass data inside FlexView from Jet Admin if you have defined custom attributes for your FlexView (Examples from GitHub include them already).
For Angular: Please note that Angular changes Inputs names to dash-case when creating Custom Element (https://angular.io/guide/elements#mapping)
Use Custom Component Outputs
You can specify Outputs to take from your FlexView and use their values in other Jet Admin components. For such cases you should set Outputs inside your FlexView by sending CustomEvent with Output name and its value in detail field (Examples from GitHub include it already).
Then you can create Output and set its name and use them for other components (for example set Text Field value to FlexView Output).
Last modified 1yr ago
Export as PDF
Copy link