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

LWC Refresh (see SheetJS/sheetjs#3040)

Browse Source
This commit is contained in:
SheetJS 2024-05-05 12:07:09 -04:00
parent 2964215c95
commit f7f029169d
2 changed files with 26 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
docz/docs/03-demos/30-cloud/01-salesforce.md
View File

@ -29,7 +29,7 @@ may require some adjustments. The official documentation should be consulted.
:::note Tested Deployments
This demo was last tested on 2023 September 30 using Lightning API version `58.0`.
This demo was last tested on 2024 May 05 using Lightning API version `59.0`.
:::
@ -283,7 +283,7 @@ npx @salesforce/cli --version
When the demo was last tested, the command printed
```
@salesforce/cli/2.10.2 darwin-x64 node-v16.20.2
@salesforce/cli/2.39.6 darwin-x64 node-v22.0.0
```
:::
@ -316,21 +316,10 @@ cd SheetForce
npx @salesforce/cli lightning generate component --type lwc -n sheetComponent -d force-app/main/default/lwc
```
:::danger pass
At the time of testing, the CLI tool created components with app version 59.
This version number is not valid for scratch orgs.
**This is a bug in the Salesforce CLI**
The workaround is to manually pin version 58 in the JSON and `meta.xml` files.
:::
7) Replace `force-app\main\default\lwc\sheetComponent\sheetComponent.html` with
the following template code:
```html title="force-app\main\default\lwc\sheetComponent\sheetComponent.html"
```html title="force-app\main\default\lwc\sheetComponent\sheetComponent.html (add highlighted lines)"
<template>
<!-- highlight-next-line -->
<b>SheetForce demo</b>
@ -340,11 +329,11 @@ the following template code:
8) Replace `force-app\main\default\lwc\sheetComponent\sheetComponent.js-meta.xml`
with the following XML:
```xml title="force-app\main\default\lwc\sheetComponent\sheetComponent.js-meta.xml"
```xml title="force-app\main\default\lwc\sheetComponent\sheetComponent.js-meta.xml (replace highlighted lines)"
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>59.0</apiVersion>
<!-- highlight-start -->
<apiVersion>58.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>SheetForce</masterLabel>
<description>SheetJS Demo</description>
@ -355,27 +344,16 @@ with the following XML:
</LightningComponentBundle>
```
9) Edit `sfdx-version.json` and set the `sourceApiVersion` to `58.0`:
```json title="sfdx-version.json"
"name": "SheetForce",
"namespace": "",
"sfdcLoginUrl": "https://login.salesforce.com",
// highlight-next-line
"sourceApiVersion": "58.0"
}
```
### Deploy Sample Project
10) Deploy the project from the CLI. You will need the Salesforce unique
9) Deploy the project from the CLI. You will need the Salesforce unique
Username. For example, if the Username was `SF@USER.NAME`, the command is:
```bash
npx @salesforce/cli project deploy start -d force-app -o SF@USER.NAME
```
11) Find the new component:
10) Find the new component:
<Tabs groupId="sfview">
<TabItem value="nuevo" label="Lightning Experience">
@ -418,7 +396,7 @@ The page in Salesforce Classic will look like the screenshot below:
#### Create App Page
12) Create an "App Page" in the "Lightning App Builder":
11) Create an "App Page" in the "Lightning App Builder":
<Tabs groupId="sfview">
<TabItem value="nuevo" label="Lightning Experience">
@ -463,7 +441,7 @@ F) Select "One Region" in the left list and click "Done"
#### App Builder
13) Add the "SheetForce" component to the App Page.
12) Add the "SheetForce" component to the App Page.
In the left "Components" sidebar, under the "Custom" section, there should be a
"SheetForce" entry.
@ -473,7 +451,7 @@ builder main view to add it to the page.
Click "Save".
14) Activate the page.
13) Activate the page.
When the "Page Saved" modal is displayed, click "Activate".
@ -483,7 +461,7 @@ The following options should be set:
Click "Save" to activate the page.
15) Open the demo page.
14) Open the demo page.
Click the left arrow in the top-left corner of the page to return to Setup.
@ -499,7 +477,7 @@ The app will display the "SheetForce demo" text from the component template:
### Add SheetJS
<ol start="16"><li><p>Download <a href={"https://cdn.sheetjs.com/xlsx-" + current + "/package/dist/xlsx.full.min.js"}>{"https://cdn.sheetjs.com/xlsx-" + current + "/package/dist/xlsx.full.min.js"}</a></p></li></ol>
<ol start="15"><li><p>Download <a href={"https://cdn.sheetjs.com/xlsx-" + current + "/package/dist/xlsx.full.min.js"}>{"https://cdn.sheetjs.com/xlsx-" + current + "/package/dist/xlsx.full.min.js"}</a></p></li></ol>
:::danger pass
@ -517,7 +495,7 @@ curl -o xlsx.full.min.js https://cdn.sheetjs.com/xlsx-${current}/package/dist/xl
</CodeBlock>
17) Move the file to the `force-app/main/default/staticresources/` folder and
16) Move the file to the `force-app/main/default/staticresources/` folder and
rename the file to `sheetjs.js`.
If the file was downloaded from the previous command, `mv` can move and rename:
@ -526,7 +504,7 @@ If the file was downloaded from the previous command, `mv` can move and rename:
mv xlsx.full.min.js force-app/main/default/staticresources/sheetjs.js
```
18) Create `force-app/main/default/staticresources/sheetjs.resource-meta.xml`
17) Create `force-app/main/default/staticresources/sheetjs.resource-meta.xml`
(`sheetjs.resource-meta.xml` in the folder from step 2) with the following XML:
```xml title="force-app/main/default/staticresources/sheetjs.resource-meta.xml"
@ -537,13 +515,13 @@ mv xlsx.full.min.js force-app/main/default/staticresources/sheetjs.js
</StaticResource>
```
19) Deploy the project again. Replace `SF@USER.NAME` with the unique Username:
18) Deploy the project again. Replace `SF@USER.NAME` with the unique Username:
```bash
npx @salesforce/cli project deploy start -d force-app -o SF@USER.NAME
```
20) Look for the static resource:
19) Look for the static resource:
<Tabs groupId="sfview">
<TabItem value="nuevo" label="Lightning Experience">
@ -579,10 +557,10 @@ The page in Salesforce Classic will look like the screenshot below:
### Test the Static Resource
21) Replace `force-app/main/default/lwc/sheetComponent/sheetComponent.js` with
20) Replace `force-app/main/default/lwc/sheetComponent/sheetComponent.js` with
the following script:
```js title="force-app/main/default/lwc/sheetComponent/sheetComponent.js"
```js title="force-app/main/default/lwc/sheetComponent/sheetComponent.js (replace script)"
import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import sheetjs from '@salesforce/resourceUrl/sheetjs';
@ -592,7 +570,6 @@ export default class SheetComponent extends LightningElement {
async connectedCallback() {
await loadScript(this, sheetjs); // load the library
// At this point, the library is accessible with the `XLSX` variable
// highlight-next-line
this.version = XLSX.version;
}
}
@ -600,7 +577,7 @@ export default class SheetComponent extends LightningElement {
This component exposes a `version` property based on the SheetJS version.
22) Replace `force-app/main/default/lwc/sheetComponent/sheetComponent.html` with
21) Replace `force-app/main/default/lwc/sheetComponent/sheetComponent.html` with
the following template:
```html title="force-app/main/default/lwc/sheetComponent/sheetComponent.html"
@ -612,13 +589,13 @@ the following template:
This template references the `version` property.
23) Deploy the project again. Replace `SF@USER.NAME` with the unique Username:
22) Deploy the project again. Replace `SF@USER.NAME` with the unique Username:
```bash
npx @salesforce/cli project deploy start -d force-app -o SF@USER.NAME
```
24) Reload the "SheetJS Demo" page. The page should display the SheetJS version:
23) Reload the "SheetJS Demo" page. The page should display the SheetJS version:
![Version number](pathname:///salesforce/version.png)
@ -631,7 +608,7 @@ original "SheetForce demo" text after refreshing, close and reopen the demo app.
### Export Data from SF Lists
25) Add a button to `sheetComponent.html` that will call a `download` callback:
24) Add a button to `sheetComponent.html` that will call a `download` callback:
```html title="force-app/main/default/lwc/sheetComponent/sheetComponent.html"
<template>
@ -644,7 +621,7 @@ original "SheetForce demo" text after refreshing, close and reopen the demo app.
</template>
```
26) Replace `sheetComponent.js` with the following:
25) Replace `sheetComponent.js` with the following:
```js title="force-app/main/default/lwc/sheetComponent/sheetComponent.js"
import { LightningElement, wire, api } from 'lwc';
@ -681,17 +658,17 @@ export default class SheetComponent extends LightningElement {
}
```
27) Deploy the project again. Replace `SF@USER.NAME` with the unique Username:
26) Deploy the project again. Replace `SF@USER.NAME` with the unique Username:
```bash
npx @salesforce/cli project deploy start -d force-app -o SF@USER.NAME
```
28) Reload the "SheetJS Demo" page. The page should include a button for export:
27) Reload the "SheetJS Demo" page. The page should include a button for export:
![SF Export Button](pathname:///salesforce/export.png)
29) Click the "Click to Export!" button. The app will attempt to download a file.
28) Click the "Click to Export!" button. The app will attempt to download a file.
The simple export includes all of the data:

BIN
docz/static/salesforce/version.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 65 KiB