tamuです。
前回の「3rd party libraryを使う」ではサードパーティライブラリを使って、ローカルでJspreadsheetを動かすところまでやりました。
今回はこれをSalesforce上で動かしていきたいと思います。
JSライブラリの書き方によってはSalesforce上で動かない場合があるのでライブラリ側の手直しが必要となってきます。
デプロイ準備
meta.xml にどれをtargetとするか記入します。
今回はすべてをtargetにしています。
1
2
3
4
5
6
7
8
9
10
11
| <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightningCommunity__Page</target>
</targets>
</LightningComponentBundle>
|
デプロイ
資材をSalesforce上にデプロイします。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| $ sfdx force:source:deploy --sourcepath ./force-app/main/default/ -u [SalesforceOrg]
*** Deploying with REST ***
Job ID | xxxxxxxxxxxxxxxxxx
SOURCE PROGRESS | ████████████████████████████████████████ | 3/3 Components
=== Deployed Source
FULL NAME TYPE PROJECT PATH
──────────────────────────────── ──────────────────────── ─────────────────────────────────────────────────────────────────────
productviewer/productviewer.html LightningComponentBundle force-app/main/default/lwc/productviewer/productviewer.html
productviewer/productviewer.js LightningComponentBundle force-app/main/default/lwc/productviewer/productviewer.js
productviewer/productviewer.js LightningComponentBundle force-app/main/default/lwc/productviewer/productviewer.js-meta.xml
jspreadsheet StaticResource force-app/main/default/staticresources/jspreadsheet/index.js
jspreadsheet StaticResource force-app/main/default/staticresources/jspreadsheet/jspreadsheet.css
jspreadsheet StaticResource force-app/main/default/staticresources/jspreadsheet.resource-meta.xml
jsuites StaticResource force-app/main/default/staticresources/jsuites/jsuites.css
jsuites StaticResource force-app/main/default/staticresources/jsuites/jsuites.js
jsuites StaticResource force-app/main/default/staticresources/jsuites.resource-meta.xml
|
画面の作成
設定 → Lightningアプリケーションビルダー から新しいアプリケーションページを作ります。
今回作った productviewer というコンポーネントのみを表示するページを用意しました。
実行とエラーの解消
実行するとエラーが出ます。
このエラーはJS/CSS読み込み時のエラーです。
開発者コンソールでエラー内容を確認します。
1
2
3
4
5
6
7
| TypeError: Cannot read properties of undefined (reading 'contextmenu')
at Object.obj.createTable (index.js:6560)
at Object.obj.prepareTable (index.js:6395)
at Object.obj.init (index.js:12829)
at Proxy.jexcel (index.js:13106)
at u.initializeUI (productviewer.js:4)
at eval (productviewer.js:4)
|
jspreadsheetのindex.jsの6560行目付近を確認します。
6559
6560
6561
6562
6563
6564
| // Create element
jSuites.contextmenu(obj.contextMenu, {
onclick:function() {
obj.contextMenu.contextmenu.close(false);
}
});
|
jSuites の contextmenu がないと言っています。
次にどこで jSuites を定義しているのかを確認します。
5887
5888
5889
| if (! jSuites && typeof(require) === 'function') {
var jSuites = require('jsuites');
}
|
require がまずいですね。
console.log で typeof(require) を確認するとわかるのですが、
これがうまく動いていないようなので書き換えます。
5887
5888
5889
5890
5891
| if (! jSuites && typeof(require) === 'function') {
var jSuites = require('jsuites');
} else {
var jSuites = window.jSuites;
}
|
jsuite の方のコードを見るとわかるのですが、 window 下に jSuites を割り当てているので、
それを持ってくるように変えます。
再デプロイして実行するとエラーは出なくなりました。
CSSの調整
Chromeのデベロッパーコンツールで確認するとDOMは構築できているのですが、幅が設定されていないため表示されていないように見えています。
デベロッパーツールでDOMのスタイル対して width: 1200px; をつけて実験していった結果、tableタグに対して横幅を設定すれば良いことがわかりました。
そのため、 css に以下の設定を追加しました。
1
2
3
| table.jexcel {
width: 100%;
}
|
まとめ
最終的にこういう表示ができました。
