92 lines
2.5 KiB
Markdown
92 lines
2.5 KiB
Markdown
# lowcoder-sdk
|
|
|
|
## Usage
|
|
|
|
yarn:
|
|
|
|
```bash
|
|
yarn add lowcoder-sdk
|
|
```
|
|
|
|
npm:
|
|
|
|
```bash
|
|
npm install lowcoder-sdk
|
|
```
|
|
|
|
## Integrate Lowcoder's app/module into existing app page
|
|
|
|
1. Publish your app/module in Lowcoder.
|
|
2. Set the app/module's access privilege as public.
|
|
3. Add code in your existing app as below.
|
|
|
|
### Import style
|
|
|
|
```ts
|
|
import "lowcoder-sdk/dist/style.css";
|
|
```
|
|
|
|
### For react app:
|
|
|
|
```ts
|
|
import { LowcoderAppView } from "lowcoder-sdk";
|
|
|
|
<LowcoderAppView appId="{YOUR_APPLICATION_ID}" />;
|
|
```
|
|
|
|
#### LowcoderViewProps
|
|
|
|
| Name | Type | Description | Default value |
|
|
|------------------------|-----------------------------|-----------------------------------------------------------------------------------------|---------------|
|
|
| appId | string | The app's id in Lowcoder. Required! | -- |
|
|
| baseUrl | string | Lowcoder's api base url | -- |
|
|
| onModuleEventTriggered | (eventName: string) => void | Triggered when module's custom event is triggered. Works only when the app is a module. | -- |
|
|
| onModuleOutputChange | (output: any) => void | Triggered when module's outputs change. Works only when the app is a module. | -- |
|
|
|
|
#### Invoke module methods
|
|
|
|
```tsx
|
|
import { useRef } from "ref";
|
|
import { LowcoderAppView } from "lowcoder-sdk";
|
|
|
|
function MyExistingAppPage() {
|
|
const appRef = useRef();
|
|
return (
|
|
<div>
|
|
<LowcoderAppView appId={YOUR_APPLICATION_ID} ref={appRef} />;
|
|
<button onClick={() => appRef.current?.invokeMethod("some-method-name")}>
|
|
Invoke method
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### For vanilla js:
|
|
|
|
```js
|
|
import { bootstrapAppAt } from "lowcoder-sdk";
|
|
|
|
const node = document.querySelector("#my-app");
|
|
|
|
async function bootstrap() {
|
|
const instance = await bootstrapAppAt(YOUR_APPLICATION_ID, node);
|
|
|
|
// set module inputs
|
|
instance.setModuleInputs({ input1: "xxx", input2: "xxx" });
|
|
|
|
// invoke module methods
|
|
instance.setModuleInputs({ input1: "xxx", input2: "xxx" });
|
|
|
|
// listen module event trigger
|
|
instance.on("moduleEventTriggered", (eventName) => {
|
|
console.info("event triggered:", eventName);
|
|
});
|
|
|
|
// listen module output change
|
|
instance.on("moduleOutputChange", (data) => {
|
|
console.info("output data:", data);
|
|
});
|
|
}
|
|
```
|