forked from sheetjs/docs.sheetjs.com
LWC Refresh (see SheetJS/sheetjs#3040)
This commit is contained in:
parent
2964215c95
commit
f7f029169d
@ -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:
|
||||
|
||||
|
Binary file not shown.
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 65 KiB |
Loading…
Reference in New Issue
Block a user