Basic Tutorial: Hello Exchange Plugin web view
We will go over how to develop a web view for the hello-exchange plugin. After developing this web view, we will see a new page that displays some of the exchange information.
Step 1: Initialize the hello-exchange plugin web view.
Run the following commands to initialize the plugin web view:
1
cd web/
2
npm run add-plugin --plugin=hello-exchange --type=page
Copied!
Step 2: Install the initial plugin.
Run the following commands to build the initial plugin with a default view and install the plugin.
1
cd ..
2
npm run build --plugin=hello-exchange
Copied!
Step 3: disable CORS error on the browser.
The web view JSON file and bundles are served on the localhost port 8080. In order to allow the kit to access them in plugin development mode, we need to disable the CORS issue on the browser. This can be achieved by using a browser extension.
Step 4: Plugin interactive development mode
To start using plugin interactive development mode, we need to run the commands of steps 5 and 6 simultaneously.
Step 5: Create, watch and serve web view bundles and the JSON file.
Run the following command on the plugin starter kit web directory:
1
npm start --plugin=hello-exchange
Copied!
Step 6: Start Hollaex kit plugin development mode.
Run the following command on the Hollaex kit web directory:
1
npm run dev:plugin --plugin=hello-exchange
Copied!
In order to see the plugin's changes, we need to refresh the page after every change.
Step 7: Update the view.json file.
1
{
2
"meta": {
3
"is_page": true,
4
"path": "/hello-exchange",
5
"hide_from_appbar": true,
6
"hide_from_sidebar": false,
7
"hide_from_menulist": false,
8
"string": {
9
"id": "title",
10
"is_global": false
11
},
12
"icon": {
13
"id": "SIDEBAR_HELP",
14
"is_global": true
15
}
16
}
17
}
Copied!
Step 8: Update the strings.json file.
1
{
2
"en": {
3
"title": "Hello exchange",
4
"hello": "Hello {0}"
5
}
6
}
Copied!
Step 9: Update Form.js component
1
touch src/plugins/hello-exchange/views/view/Form.js
Copied!
Form.js
1
import React, { useEffect, useState } from 'react';
2
import { IconTitle, PanelInformationRow } from 'hollaex-web-lib';
3
import { withKit } from 'components/KitContext';
4
import Title from 'components/Title';
5
import axios from 'axios';
6
7
const Form = ({
8
strings: STRINGS,
9
icons: ICONS,
10
generateId,
11
plugin_url: PLUGIN_URL
12
}) => {
13
14
const [info, setInfo] = useState();
15
16
useEffect(() => {
17
axios.get(`${PLUGIN_URL}/plugins/hello-exchange/info`).then(({ data: { exchange_info = {} }}) => {
18
setInfo(exchange_info);
19
})
20
}, [])
21
22
return (
23
<div className="presentation_container apply_rtl verification_container">
24
<IconTitle
25
stringId={generateId('title')}
26
text={STRINGS[generateId('title')]}
27
textType="title"
28
iconPath={ICONS['SIDEBAR_HELP']}
29
/>
30
<form className="d-flex flex-column w-100 verification_content-form-wrapper">
31
<div className="verification-form-panel mt-3 mb-5">
32
<div className="my-4 py-4">
33
<Title />
34
<div className="py-4">
35
{info && Object.entries(info).map(([key, value]) => (
36
<PanelInformationRow
37
label={key}
38
information={String(value)}
39
className="title-font"
40
disable
41
/>
42
))}
43
</div>
44
</div>
45
</div>
46
</form>
47
</div>
48
)
49
}
50
51
const mapContextToProps = ({ strings, activeLanguage, icons, generateId, plugin_url }) => ({
52
strings,
53
activeLanguage,
54
icons,
55
generateId,
56
plugin_url
57
});
58
59
export default withKit(mapContextToProps)(Form);
Copied!
Step 10: Install the plugin.
Uninstall the initial plugin. Then run the following commands to build the plugin again. Then install the plugin json file on the kit.
1
cd ..
2
npm run build --plugin=hello-exchange
Copied!
Last modified 6mo ago
Copy link
Contents
Step 1: Initialize the hello-exchange plugin web view.
Step 2: Install the initial plugin.
Step 3: disable CORS error on the browser.
Step 4: Plugin interactive development mode
Step 5: Create, watch and serve web view bundles and the JSON file.
Step 6: Start Hollaex kit plugin development mode.
Step 7: Update the view.json file.
Step 8: Update the strings.json file.
Step 9: Update Form.js component
Step 10: Install the plugin.