sheetjs/docs.sheetjs.com
1
Fork 4
Code Issues 1 Pull Requests 1 Projects Releases Wiki Activity

Oracle Cloud Infrastructure demo

Browse Source
This commit is contained in:
SheetJS 2025-02-18 00:27:56 -05:00
parent fd19686365
commit 7a6018aa9f
8 changed files with 442 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

647
docz/docs/03-demos/30-cloud/03-oraclecloud.md
View File

@ -140,27 +140,27 @@ be processed before loading Oracle Visual Builder scripts.
## Business Objects
`Business Objects`[^2] in Oracle VBS provides a server-side model implementation
"Business Objects"[^2] in Oracle VBS provides a server-side model implementation
for persistent data storage.
Think of them as a combination of a data model and database table that handles both data storage and
UI binding.
Think of them as a combination of a data model and database table that handles
both data storage and UI binding.
### Business Object Definition
#### Schema
The example [presidents sheet](https://docs.sheetjs.com/pres.xlsx) has a header
row with "Name" and "Index" columns. In Oracle VBS, we model this as a Business
Object with two fields.
#### Schema
Fields in Business Objects must have a specified type. A sample business object
definition for the following schema is shown below:
| Field Label | Type | Field ID |
|:------------|:---------|:---------|
| Name | `string` | `name` |
| Index | `number` | `index1` |
| Field ID | Type | Field Label |
|:---------|:---------|:------------|
| `name` | `string` | Name |
| `index1` | `number` | Index |
```json title="Sample Business Object Definition"
{ "items" : [ {
@ -203,11 +203,13 @@ Fields are identified by Field ID. The field names do not appear in the result.
#### Updating Business Object
Starting from a spreadsheet file, the SheetJS [`read`](/docs/api/parse-options) method parses the data into a workbook object. After
selecting a worksheet, [`sheet_to_json`](/docs/api/utilities/array#array-output) generates row objects that can be created as Business Object
records using the auto-generated REST API.
Starting from a spreadsheet file, the SheetJS [`read`](/docs/api/parse-options)
method parses the data into a workbook object. After selecting a worksheet,
[`sheet_to_json`](/docs/api/utilities/array#array-output) generates row objects.
Using the auto-generated REST API, new Business Object records can be created.
Here is a sample flow diagram and method for downloading a workbook, generating rows from the first worksheet, and updating a `Business Object`[^2]:
Here is a sample flow diagram and method for downloading a workbook, generating
rows from the first worksheet, and updating a Business Object[^2]:
```mermaid
flowchart LR
@ -262,10 +264,13 @@ flowchart LR
#### Rendering Data
In Oracle VBS, the table component `oj-table` supports direct binding to Business Objects for data display.
The view structure defines both the data source binding and column layout:
In Oracle VBS, the table component `oj-table`[^4] supports direct binding to
Business Objects for data display. The view structure specifies the data source
binding and column layout.
The following example uses the `Table`[^4] component to display data.
When using the design mode to add a Table, VBS will use a `ServiceDataProvider`
with columns based on the specified Endpoint Structure. The following view code
was generated when testing the ["Complete Example"](#complete-example):
<CodeBlock language="html" value="html" title="Example View for displaying an array of objects [sheetjs_demo_app/main/main-start]">{`\
<div class="oj-flex">
@ -283,7 +288,6 @@ The following example uses the `Table`[^4] component to display data.
`}
</CodeBlock>
#### Exporting Business Objects
The export functionality converts Business Object data into an Excel spreadsheet. The process involves retrieving data through
@ -307,100 +311,91 @@ flowchart LR
linkStyle 2,3,4 color:blue,stroke:blue;
```
<CodeBlock language="javascript" value="javascript" title="Download workbook, extract data from the first worksheet, and update ">{`
define(['vb/action/actionChain', 'vb/action/actions', 'xlsx'], (ActionChain, Actions, XLSX) => {
class ButtonActionChain1 extends ActionChain {
async run(context) {
// get pres data
const presDataResponse = await Actions.callRest(context, {
endpoint: 'businessObjects/getall_Pres',
parameters: {
fields: 'name,index1'
}
});
<CodeBlock language="javascript" value="javascript" title="Download workbook, extract data from the first worksheet, and update ">{`\
define(['vb/action/actionChain', 'vb/action/actions', 'xlsx'], (ActionChain, Actions, XLSX) => {
class ButtonActionChain1 extends ActionChain {
async run(context) {
// get pres data
const presDataResponse = await Actions.callRest(context, {
endpoint: 'businessObjects/getall_Pres',
parameters: {
fields: 'name,index1'
}
});
// transform to simple array
const simplifiedData = presDataResponse.body.items.map(item => ({
Name: item.name,
Index: item.index1
}));
// transform to simple array
const simplifiedData = presDataResponse.body.items.map(item => ({
Name: item.name,
Index: item.index1
}));
// generate workbook
const ws = XLSX.utils.json_to_sheet(simplifiedData);
const wb = XLSX.utils.book_new(ws, "Presidents");
// generate workbook
const ws = XLSX.utils.json_to_sheet(simplifiedData);
const wb = XLSX.utils.book_new(ws, "Presidents");
// export to XLSX which triggers a download
XLSX.writeFileXLSX(wb, "SheetJSOracleVisualBuilderAoO.xlsx");
}
// export to XLSX which triggers a download
XLSX.writeFileXLSX(wb, "SheetJSOracleVisualBuilderAoO.xlsx");
}
return ButtonActionChain1;
});
`}
}
return ButtonActionChain1;
});`}
</CodeBlock>
:::note pass
Visual Builder Studio provides a visual development environment and handles the build and
deployment process automatically.
:::
### Importing Data {#importing-data-snippet}
The import functionality enables data transfer from an Excel spreadsheet into your Oracle VBS
application. The process begins by fetching the XLSX file, parsing it using SheetJS, and then
creating corresponding Business Object records.
The import functionality enables data transfer from an Excel spreadsheet into
the Oracle VBS application. The process begins by fetching the XLSX file,
parsing it using SheetJS, and then creating corresponding Business Object records.
```javascript title=""
```js title="Importing Data code"
define([
'vb/action/actionChain',
'vb/action/actions',
'vb/action/actionUtils',
'xlsx'
'vb/action/actionChain',
'vb/action/actions',
'vb/action/actionUtils',
'xlsx'
], (
ActionChain,
Actions,
ActionUtils,
XLSX
ActionChain,
Actions,
ActionUtils,
XLSX
) => {
'use strict';
'use strict';
class ButtonActionChain extends ActionChain {
class ButtonActionChain extends ActionChain {
/**
* @param {Object} context
*/
async run(context) {
const { $page, $flow, $application, $constants, $variables } = context;
/**
* @param {Object} context
*/
async run(context) {
const { $page, $flow, $application, $constants, $variables } = context;
// fetch XLSX file
const url = "https://docs.sheetjs.com/pres.xlsx";
const data = await (await fetch(url)).arrayBuffer();
const wb = XLSX.read(data);
// fetch XLSX file
const url = "https://docs.sheetjs.com/pres.xlsx";
const data = await (await fetch(url)).arrayBuffer();
const wb = XLSX.read(data);
// get the first worksheet
const ws = wb.Sheets[wb.SheetNames[0]];
// get the first worksheet
const ws = wb.Sheets[wb.SheetNames[0]];
// convert to json
const jsonData = XLSX.utils.sheet_to_json(ws);
// convert to json
const jsonData = XLSX.utils.sheet_to_json(ws);
// process each row and create business object records
for (const row of jsonData) {
const presData = {
name: row.Name,
index1: Number(row.Index)
};
// process each row and create business object records
for (const row of jsonData) {
const presData = {
name: row.Name,
index1: Number(row.Index)
};
// create a business object record
await Actions.callRest(context, {
endpoint: 'businessObjects/create_Pres',
body: presData
});
}
}
// create a business object record
await Actions.callRest(context, {
endpoint: 'businessObjects/create_Pres',
body: presData
});
}
}
return ButtonActionChain;
}
return ButtonActionChain;
});
```
@ -410,52 +405,52 @@ The export functionality allows you to convert Business Object data into Excel s
This process involves retrieving data from the Business Object using REST API calls, transforming
it into a format suitable for SheetJS, and generating an XLSX file.
```javascript
```js title="Exporting Data code"
define([
'vb/action/actionChain',
'vb/action/actions',
'vb/action/actionUtils',
'xlsx'
'vb/action/actionChain',
'vb/action/actions',
'vb/action/actionUtils',
'xlsx'
], (
ActionChain,
Actions,
ActionUtils,
XLSX
ActionChain,
Actions,
ActionUtils,
XLSX
) => {
'use strict';
'use strict';
class ButtonActionChain1 extends ActionChain {
class ButtonActionChain1 extends ActionChain {
/**
* @param {Object} context
*/
async run(context) {
const { $page, $flow, $application, $constants, $variables } = context;
// get pres data
const presDataResponse = await Actions.callRest(context, {
endpoint: 'businessObjects/getall_Pres',
parameters: {
fields: 'name,index1'
}
});
// transform to simple array
const simplifiedData = presDataResponse.body.items.map(item => ({
Name: item.name,
Index: item.index1
}));
// generate workbook
const ws = XLSX.utils.json_to_sheet(simplifiedData);
const wb = XLSX.utils.book_new(ws, "Presidents");
/* export to XLSX */
XLSX.writeFileXLSX(wb, "SheetJSOracleVisualBuilderAoO.xlsx");
/**
* @param {Object} context
*/
async run(context) {
const { $page, $flow, $application, $constants, $variables } = context;
// get pres data
const presDataResponse = await Actions.callRest(context, {
endpoint: 'businessObjects/getall_Pres',
parameters: {
fields: 'name,index1'
}
});
// transform to simple array
const simplifiedData = presDataResponse.body.items.map(item => ({
Name: item.name,
Index: item.index1
}));
// generate workbook
const ws = XLSX.utils.json_to_sheet(simplifiedData);
const wb = XLSX.utils.book_new(ws, "Presidents");
/* export to XLSX */
XLSX.writeFileXLSX(wb, "SheetJSOracleVisualBuilderAoO.xlsx");
}
return ButtonActionChain1;
}
return ButtonActionChain1;
});
```
@ -468,78 +463,211 @@ Visual Builder Studio access.
:::
0. If you do not have an account create a new Oracle Cloud free tier account[^3].
0. If you do not have one, create a new Oracle Cloud free tier account[^3].
1. Sign in to the [Oracle Cloud Management Console](https://cloud.oracle.com/).
### Visual Builder Setup
1. Sign in to the [Oracle Cloud Management Console](https://cloud.oracle.com/) with your created account.
:::note pass
2. Type "Visual Builder Studio" in the top search box and click Visual Builder Studio (under services).
In this section, we will configure VBS and create a new instance.
:::
2. Type "Visual Builder Studio" in the top search box and click "Visual Builder
Studio" in the "Services" section.
![Oracle Cloud search for "Visual Builder Studio"](pathname:///oraclecloud/search_box_visual_builder.png)
3. Before creating Visual Builder Studio Instances we need to create an instance. Click `Visual Builder` in the left sidebar, ensure a Compartment is selected in the dropdown, and click "Create Instance".
3. Click `Visual Builder` in the left sidebar. In the "List scope" section, if
no Compartment is selected, click the dropdown and select a Compartment.
!["Visual Builder" create instance](pathname:///oraclecloud/create_new_instance.png)
4. Click "Create Instance".
In the Create Instance panel, enter the following options:
- Name: `sheetjs-demo-vb-instance`
- Nodes: `1` (it cannot be changed in a Free account)
- Choose network access: `Default (No access rules.)`
The panel should look like the following screenshot:
![Create Visual Builder Instance](pathname:///oraclecloud/create_vb_instance.png)
- Give it a name: `sheetjs-demo-vb-instance`
- Select network access: `Default (No access rules.)`
- Nodes: `1`
5. Click "Create Visual Builder Instance". The panel will close.
4. Now click `Visual Builder Studio` from the left sidebar and click `Create Visual Builder Studio` and give it instance name: `sheetjs-vbs-instance` and click next and set
select compartment to `yourusername (root)`. Lastly, click `Create Visual Builder Studio` (this will take 5-15 minutes to fully setup).
The instances table will include a new row for `sheetjs-demo-vb-instance`. When
the instance is ready, the status will change to "ACTIVE".
- Click link name `sheetjs-vbs-instance`
![Instance is ready](pathname:///oraclecloud/instances_table_ready.png)
5. Click `Service Console` create a new project and fill it with the following inputs.
6. Click "Visual Builder Studio" in the left sidebar.
- Project Details: `sheetjs-demo-project`
- Project Template: `Empty Project`
- Project Properties: `Markdown`
- Click Finish
7. Click "Create Visual Builder Studio" in the main area.
6. Select `Project Home` from the left sidebar and create an environment.
- Environment Name: `sheetjs-demo-env`
- Click Create
- Click `Add Instance`
In the Create Visual Builder Studio Instance panel, type `sheetjs-vbs-instance`
in the Instance Name textbox and click "Next"
In the "CI/CD Setup" page, ensure "Yes, I authorize this" is checked. Select the
compartment in the dropdown and click `Create Visual Builder Studio`.
You will be redirected to the instance page.
8. Wait for the instance to be completed. The large circle will be green.
![VBS Instance is ready](pathname:///oraclecloud/instance_green.png)
9. Click `Service Console`. You will be redirected to the organization page.
10. Scroll down and select the "Projects" tab. Click the "+ Create" button to
create a new project. The "New Project" wizard has 4 steps:
- In "Project Details", enter the Name `sheetjs-demo-project` and click "Next"
- In "Project Template", select `Empty Project` and click "Next"
- In "Project Properties" page, select `Markdown` and click "Next"
- Click "Finish" (by default, the current user will be the "Project Owner")
You will be redirected to a provisioning page while resources are allocated:
![Provisioning page](pathname:///oraclecloud/provisioning.png)
Once allocated, you will be redirected to the project page.
11. Click "⌂ Project Home" in the left sidebar and click "+ Create Environment".
In the popup, type `sheetjs-demo-env` in the "Environment Name" text box and
click "Create". You will be redirected to the Environments page.
12. Click `+ Add Instance`. In the modal, select the following:
- Instance Type: "Visual Builder and Oracle Integration"
- Add Instance Using: "Instance List"
- Check the box in the `sheetjs-demo-vb-instance` table row.
The selections should match the following screenshot:
![Connect instance to environment](pathname:///oraclecloud/env_connect_to_instance.png)
7. In Environments select the Service Instances tab and search for `Instance URL` if not shown click details to expand Visual Builder `sheetjs-demo-vb-instance` and open `Instance URL`
This will open Visual Builder Studio.
After making the selections, click "Add". Once the instance is created, there
will be a checkmark next to `sheetjs-demo-env` in the main area.
8. Click `New Application` and set
![Instance created](pathname:///oraclecloud/instance_created.png)
13. Select the "Service Instances" tab and find the `sheetjs-demo-vb-instance`
card. If "Instance URL" is not shown, click "Details" to show the URL.
![Environment card](pathname:///oraclecloud/env_card.png)
Click the "Instance URL". Visual Builder will be launched in a new window.
14. Click "+ New Application". In the popup, enter the following options:
- Application Display Name: `sheetjs-vbs-demo`
- Application Template: `Empty Application`
- Click Finish
- Application Name: `sheetjs_vbs_demo` (automatic)
- Application Template: `Empty Application` (default)
9. Create a new Business Object by clicking **Business Object** card in the Welcome tab or from the sidebar as shown
![Create a new Business Object](pathname:///oraclecloud/create_business_object.png)
Click "Finish". After a short wait, the browser will redirect to the new app.
### Business Object Setup
:::note pass
In this section, we will create a new Business Object.
:::
15. Click the **Business Objects** card in the Welcome tab or the "**⛁**" icon
in the left sidebar. The "Business Objects" panel will be displayed.
![Create a new Business Object](pathname:///oraclecloud/create_business_object.png)
Click "+ Business Object". In the popup, enter the following:
- Name: `Pres`
- Display: `President`
- Display Label: `President`
10. Click `Pres` Business Object and select Fields tab. Then, create a new field by clicking the `+Fields` button and select first drop-down `Field`.
Click "Create". You will be redirected to the Business Object page.
- Label1: `Name`
- Type1: Click `A` (`String`)
16. Select `Pres` in the Business Objects panel and select the "Fields" tab.
- Label2: `Index`
- Type2: Click `#` (`Number`)
![Business Object - Fields](pathname:///oraclecloud/business_object_fields.png)
17. Click "+ Field" and select "Field" in the dropdown. In the displayed form,
enter the following options:
- Label: `Name`
- Type: Click `A` (`String` will be displayed next to Type)
Click "Create Field".
18. Click "+ Field" and select "Field" in the dropdown. In the displayed form,
enter the following options: (we are creating a second field)
- Label: `Index`
- Type: Click `#` (`Number` will be displayed next to Type)
Click "Create Field".
19. Scan the main table and verify that two new rows were added:
![Add two new fields](pathname:///oraclecloud/creating_new_fields_name_index.png)
11. Click 🖥️ Web Applications from the left sidebar and create a new Web Application by clicking `+Web Application`
You should have the following fields.
### Web App Creation
:::note pass
In this section, we will create a new web application.
:::
20. Click "🖥️ Web Applications" in the left bar and click "+ Web Application".
In the popup, enter the following options:
- Application Name: `sheetjs_demo_app`
- Navigation Style: `None`
- Click Create
12. [Adding SheetJS Module](#installation) to the App Click 📄 `Source` from the left sidebar and paste the following on `webApps/sheetjs_demo_app/app-flow.json`
Click "Create". You will be redirected to the page designer.
<CodeBlock language="json" value="json" title="copy paste after line 5">{`\
:::note pass
If prompted to share clipboard, select "Allow".
:::
### SheetJS Alias
:::note pass
In this section, we will create an alias to the SheetJS standalone script hosted
on the [SheetJS CDN](/docs/getting-started/installation/standalone)
:::
21. Click 📄 `Source` from the left sidebar.
22. In the file tree, if `app-flow.json` is not visible, click the triangle next
to `sheetjs_demo_app` to expand the folder.
:::caution pass
Clicking on the `sheetjs_demo_app` name has no effect! You must click the
triangle next to the label to expand the folder.
:::
23. Select `app-flow.json` within the `sheetjs_demo_app` folder.
A new code window will be displayed in the main area.
24. Copy the following codeblock and insert it after line 5 in the code editor:
<CodeBlock language="json" value="json" title="webApps/sheetjs_demo_app/app-flow.json (insert after line 5)">{`\
"requirejs": {
"paths": {
"xlsx": "https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min"
@ -548,64 +676,171 @@ Visual Builder Studio access.
`}
</CodeBlock>
The following screenshot shows the result after inserting the code:
![Adding Sheetjs to the web application](pathname:///oraclecloud/adding_sheetjs_to_app.png)
### App Interface
13. Let's create the UI for our application we will be creating a table and two buttons one for import XLSX and one for export XLSX.
:::note pass
- From the left sidebar click the 🖥️ `Web Applications` and select `main-start`
- Select Page Designer and drag and drop two `Button` components and one `Table` Component to the canvas
In this section, we will create the UI for the application. It will include two
buttons for import/export and a table for displaying data.
![Darg and drop ui components to canvas](pathname:///oraclecloud/drag_drop_components_to_canvas.png)
:::
14. Creating our button event handler
- Now select the left button in the canvas and on the right side on `General` tab set ID to `import-xlsx` and label to `Import XLSX`.
- Now select the `Events` tab and click `+ Event Listener` drop down button and select `On 'ojAction'`
- Now it should auto-select `Action Chains` if not click from top tab option.
- Switch from `Design` to `Code` from top right
25. Click "🖥️ Web Applications" in the left sidebar.
26. In the tree, if `main-start` is not visible, click the triangle next to
`main` to expand the folder.
:::caution pass
Clicking on the `main` name does not expand the tree! You must click the
triangle next to the label to expand the subtree.
:::
27. Select `main-start` within the `main` section.
28. Select the "Page Designer" tab and select the "Design" tab.
In the page designer, drag and drop two `Button` components and one `Table`
Component to the canvas.
:::caution pass
The "Table" component is in the "Collections" section. Do not add a "Dynamic Table"!
:::
![Drag and drop UI components to canvas](pathname:///oraclecloud/drag_drop_components_to_canvas.png)
### Actions Setup
:::note pass
In this section, we will add event handlers for the import and export buttons.
:::
29. Select the first button in the canvas.
30. In the right panel, select the "General" tab. Enter the following details:
- ID: `import-xlsx`
- Label: `Import XLSX`
Press <kbd>Enter</kbd> after typing the label. The canvas will refresh.
31. Select the "Events" tab and click "+ Event Listener". In the dropdown, click
`🔔 On 'ojAction'`.
32. Click "Action Chains" in the top bar (next to "Page Designer").
33. Select "Code" in the top-right tab.
![Switch from Design to Code in Action Chains for the button](pathname:///oraclecloud/action_chain_select_code.png)
15. Replace `Action Chains > ButtonActionChain > Code` with the importing data snippet in the
["Importing Data"](#importing-data-snippet) example code.
The main area will show a code editor.
16. Now repeat step 14 for the second button
- Now select the first button in the canvas and on the right side on `General` tab set ID to `export-xslx` and label to `Export XLSX`.
- Now select the `Events` tab and click `+ Event Listener` drop down button and select `On 'ojAction'`
- Now it should auto-select `Action Chains` if not click from top tab option.
- Switch from `Design` to `Code` from top right
34. Copy the ["Importing Data code"](#importing-data-snippet) example code and
paste in the code editor.
17. Replace `Action Chains > ButtonActionChain1 > Code` with the exporting data snippet in the
["Exporting Data"](#exporting-data-snippet) example code.
35. Click "Page Designer" to return to the page designer.
18. Connect the Business Object `Pres` to the table.
- Now select `Page Designer` and in the canvas select the table component from the right sidebar select `Quick Start` and then `Add Data`
- This opens up a modal on `Choose the source of your data` select `Pres` Business Object and click next.
36. Select the second button in the canvas (not the "Import XLSX" button!)
37. In the right panel, select the "General" tab. Enter the following details:
- ID: `export-xlsx`
- Label: `Import XLSX`
Press <kbd>Enter</kbd> after typing the label. The canvas will refresh.
38. Select the "Events" tab and click "+ Event Listener". In the dropdown, click
`🔔 On 'ojAction'`.
39. Click "Action Chains" in the top bar (next to "Page Designer").
40. Select "Code" in the top-right tab.
41. Copy the ["Exporting Data code"](#exporting-data-snippet) example code and
paste in the code editor.
### Data Binding
:::note pass
In this section, we will connect the `Pres` Business object to the Table.
:::
42. Click "Page Designer" to return to the page designer.
43. Select the Table component in the canvas.
44. In the right panel, select the "Quick Start" tab and click "Add Data".
![Connecting Business Object Pres to the table](pathname:///oraclecloud/connecting_business_object.png)
- On Bind Data step 2 from the left sidebar named `Endpoint Structure` check box `name` and `index1` then click next and lastly click finish.
45. Complete the "Add Data" wizard:
- In "Choose the source of your data", select "Pres" in the "Business Objects"
section and click "Next".
- In the next section ("Bind Data"), check the box next to `name` and the box
next to `index1`. After confirming the page looks like the following screenshot,
click "Next".
![Bind columns to field name and index1](pathname:///oraclecloud/bind_columns_to_fields_name_index1.png)
19. Testing the Application
- a) Launch the Preview:
- Look for the Play (▶️) icon in the top-right corner of the Visual Builder Studio
- Click it to open your application in a new browser tab
- b) Test the Import Function:
- In the preview tab, click the "Import XLSX" button
- Navigate back to Visual Builder Studio
- Select the `Pres` business object
- Click the "Data" tab
- Verify that new records have been created with the president names and index
- Return to your application preview tab
- Refresh the page
- You should now see the table populated with the imported president data
- c) Test the Export Function:
- Click the "Export XLSX" button
- This will trigger an automatic download of a file named "SheetJSOracleVisualBuilderAoO.xlsx"
- Open the downloaded file using a spreadsheet editor.
- Verify that the exported data matches what was displayed in your application's table
- In the next section ("Define Query") click "Finish".
### App Testing
:::note pass
In this section, we will test import and export functionality.
:::
46. Click the Preview button (▶️ icon) in the top-right corner of the page.
The application will be launched in a new browser tab.
47. Click "Import XLSX".
48. Switch back to the Visual Builder window.
49. Click the "⛁" icon in the left sidebar and click the "Pres" Business Object.
50. Switch to the "Data" tab and verify that new data has been added.
:::caution pass
In some test runs, no data was added.
Repeat the ["SheetJS Alias"](#sheetjs-alias) steps and confirm the alias exists.
If the alias is missing, add the alias and launch a new Preview window.
:::
![Expected data for Pres Business Object](pathname:///oraclecloud/pres_data.png)
51. Switch back to the "Preview" window and refresh the page.
The preview will now show the data from the "Pres" Business Object.
![Preview of Pres Business Object](pathname:///oraclecloud/pres_preview.png)
52. Click the "Export XLSX" button.
The app will attempt to download `SheetJSOracleVisualBuilderAoO.xlsx`
Save the file and open with a spreadsheet editor. Confirm the spreadsheet
matches the data shown in the app.
[^1]: See ["Oracle Visual Builder Studio"](https://docs.oracle.com/en/cloud/paas/visual-builder/) in the Oracle Cloud documentation.
[^2]: See ["Work With Business Objects"](https://docs.oracle.com/en/cloud/paas/visual-builder/visualbuilder-building-applications/working-business-objects1.html) in the Oracle Visual Build Studio documentation.

2
docz/docs/03-demos/42-engines/02-v8.md
View File

@ -1081,7 +1081,7 @@ curl -L -o src/main.rs https://docs.sheetjs.com/v8/main.rs
There was a breaking change in version `0.102.0` affecting `v8::Context::new`.
When targeting older versions of the crate, remove the second argument:
```rs title="src/main.rs"
```rust title="src/main.rs"
let context = v8::Context::new(handle_scope); // v8 <= 0.101.0
//let context = v8::Context::new(handle_scope, Default::default()); // v8 >= 0.102.0
```

BIN
docz/static/oraclecloud/business_object_fields.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
docz/static/oraclecloud/create_new_instance.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 309 KiB

BIN
docz/static/oraclecloud/env_card.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
docz/static/oraclecloud/instance_created.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
docz/static/oraclecloud/pres_data.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
docz/static/oraclecloud/pres_preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB