LWC React-Webpack Container
Demo:
A Lightning Web Component that utilizes React and react-json-view to display JSON text within Salesforce.
Setup
- Install in your org
- Create a LWC to implement in your org
- Review example implementation for guidance
Usage
- View and edit fields where JSON text is stored
- To enable edit functionality, please review the example below for passing react-json-view props
Pass react-json-view props
-
Any props in react-json-view is supported by passing as an object to reactJsonViewProps
-
Lightning Web Component example:
-
LWC html file
<c-json-react-container json-text="{jsontext}" react-json-view-props="{reactJsonViewProps}" ></c-json-react-container>
-
LWC js file
reactJsonViewProps = { name: false, displayDataTypes: false, onEdit: edit => { this.editJson(edit); }, onAdd: edit => { this.editJson(edit); }, onDelete: edit => { this.editJson(edit); } }; editJson(edit) { const fields = {}; fields[JSON_TEST_FIELD.fieldApiName] = JSON.stringify(edit.updated_src); fields[ID_FIELD.fieldApiName] = this.recordId; const recordInput = { fields }; updateRecord(recordInput) .then(() => {}) .catch(error => { console.log(error); }); this.jsontext = JSON.stringify(edit.updated_src); }
-
-
Classic example:
-
Utilizes the LWC above an uses a Visualforce Page to render the component
-
Visualforce Page example:
<apex:page standardController="Account"> <apex:includeLightning /> <div id="container"> </div> <script> $Lightning.use("c:JsonViewApp", function () { $Lightning.createComponent( "c:jsonViewerExample", { recordId: '{!Account.Id}' }, "container", function (cmp) { console.log('component created'); }); }); </script> </apex:page>
-
-
Demo (put install instructions for the example)
-
Install in your org
-
clone lwc-json-view and deploy the example directory to your org
-
sfdx force:org:open
-
For Lightning:
- Assign AccountJSONViewRecordPage as the Lightning Record Page for the Account object
- Give users edit access to JSON Test field on Account
- Go to any Account and go to the JSON Test component to update the JSON Test field
-
For Classic:
- Give users access to Visualforce Page JsonViewPage
- Assign JSON View Account Layout as the Account page layout
- Go to any Account and go to the JsonViewPage Visualforce Page section to update the JSON Test field
Contributing
Release Update
-
Create version
- Update
versionName
&versionNumber
insfdx-project.json
- run
sfdx force:package:version:create -p lwc-json-view -d force-app -x --wait 10 -v ccc-prod
- Update
-
"promote" Version
- Get
04txxxxxx
version from previous step sfdx force:package:version:promote -p 04txxxxxx
- Get
-
Update install instructions in readme
-
Add release on github