Skip to content

Commit 6be3679

Browse files
Openblocks-docsgitbook-bot
Openblocks-docs
authored andcommitted
GITBOOK-137: Update doc: Use third-party libs
1 parent 0b35bc4 commit 6be3679

5 files changed

+17
-23
lines changed
191 KB
Loading
274 KB
Loading
277 KB
Loading
277 KB
Loading

docs/build-apps/use-third-party-libraries.md

+17-23
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Every developer learns one of the most important principles of software engineer
44

55
## Built-in libraries
66

7-
Openblocks provides some JavaScript built-in libraries for use:
7+
Openblocks provides some JavaScript built-in libraries for use.
88

99
| Library | Docs | Version |
1010
| --------- | -------------------------------------------------------------------- | -------------------------- |
@@ -14,9 +14,9 @@ Openblocks provides some JavaScript built-in libraries for use:
1414
| numbro | [https://numbrojs.com/format.html](https://numbrojs.com/format.html) | 2.3.6 |
1515
| papaparse | [https://www.papaparse.com/docs](https://www.papaparse.com/docs) | 5.3.2 |
1616

17-
## Manually import libraries
17+
## Manually import third-party libraries
1818

19-
Openblocks supports setting up preloaded JavaScript and libraries which can be **app-level** or **workspace-level**.
19+
Openblocks supports setting up preloaded JavaScript and libraries which can be at **app-level** or **workspace-level**.
2020

2121
* **App-level** libraries **** get loaded only in the app where defined. Plus, app A cannot use libraries that are set up for app B.
2222
* **Workspace-level** libraries **** will be loaded when you open any application in your workspace. All the apps can access those libraries. There can be a certain impact on app performance, especially when you have complex JavaScript functions that aren't being used in every app.
@@ -57,35 +57,29 @@ Openblocks supports setting up preloaded JavaScript and libraries which can be *
5757
<mark style="background-color:yellow;">`MutationObserver`</mark>
5858
{% endhint %}
5959

60-
\
61-
Now let's take [<mark style="color:blue;">**cowsay**</mark>](https://github.com/piuccio/cowsay) as an example and import it on app-level and workspace-level.
60+
Now let's take **cowsay** as an example and import it at app-level and workspace-level.
6261

63-
Library link:
62+
* GitHub page: [https://github.com/piuccio/cowsay](https://github.com/piuccio/cowsay)
63+
* Library link: [https://unpkg.com/[email protected]/build/cowsay.umd.js](https://unpkg.com/[email protected]/build/cowsay.umd.js)
6464

65-
```url
66-
https://unpkg.com/[email protected]/build/cowsay.umd.js
67-
```
65+
### At app-level
6866

69-
### Import on App-level
67+
Navigate to the settings page and then click the plus sign **+** under the **JavaScript library** tab. Paste the **cowsay** link and click **Add New**. You can also click the download icon to quickly download any recommended JS library.
7068

71-
Navigate to the left sidebar, click <img src="../.gitbook/assets/image (1).png" alt="" data-size="line"> > **Other** > **Scripts and style** > **Add a library**. Then paste the **cowsay** link here.
69+
<figure><img src="../.gitbook/assets/third-party-lib-1.png" alt=""><figcaption></figcaption></figure>
7270

73-
<figure><img src="../.gitbook/assets/Add a library (1) (1) (1) (1) (1) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
71+
Create a JS query and insert code.
7472

75-
Now you can write code in **JS query** to test its usage with `cowsay.say`:
73+
<figure><img src="../.gitbook/assets/third-party-lib-2.png" alt=""><figcaption></figcaption></figure>
7674

77-
<figure><img src="../.gitbook/assets/write code in JS query (1) (1) (1) (1) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
75+
You can obtain the same result by calling the `cowsay.say()` method in the value of the text component.
7876

79-
or in component **Properties**:
77+
<figure><img src="../.gitbook/assets/third-party-lib-3.png" alt=""><figcaption></figcaption></figure>
8078

81-
<figure><img src="../.gitbook/assets/or in Properties (1) (1) (1) (1) (1) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
79+
Note that the cowsay library is imported at app-level and you can not use it in any other app within your workspace.
8280

83-
And since you have set up cowsay just for **Openblocks's new application 1,** you can not use cowsay in another app.
81+
### At workspace-level
8482

85-
<figure><img src="../.gitbook/assets/in another app (1) (1) (1) (1) (1) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
83+
Go to [Opneblocks homepage](https://cloud.openblocks.dev/), select **Settings** > **Advanced**, and then click **Add** under the **JavaScript library** tab. Paste the link of the third-party JS library and click **Add New** to add it to your workspace. You can also click the download icon to quickly add any recommended JS library. The installed libraries are accessible from any app within your workspace.
8684

87-
### Import on Workspace-level
88-
89-
On Openblocks homepage, go to **Settings** > **Advanced** > **JavaScript library**. Click **+ Add a library**, paste the **cowsay** link here and click **Save**. Then you can use **cowsay** library **** in any app of your workspace.
90-
91-
<figure><img src="../.gitbook/assets/thirdparty library-5.png" alt=""><figcaption></figcaption></figure>
85+
<figure><img src="../.gitbook/assets/third-party-lib-4.png" alt=""><figcaption></figcaption></figure>

0 commit comments

Comments
 (0)