Save JSON as File and Show JSON in LWC : sanketthoughts

Save JSON as File and Show JSON in LWC
by: sanketthoughts
blow post content copied from  Salesforce Diaries
click here to view original post

As a Salesforce Developer, JSON object comes in picture very often while doing an Integration or building a new Lightning Web Component. Sometimes we need to save the JSON as file in Salesforce org or fetching the same file and parsing it as JSON back.

Business Use Case – Save JSON object as File

You came across a requirement to save the JSON object received as response as Salesforce files so that you can utilize it later when you are ready to consume the JSON response within your apex code.

Solution – Save JSON object as File

Let’s create a Lightning Web Component in your VS Code with name jsonInLwc with below code:-

jsonInLwc.html

The HTML file of the component has a Lightning card which shows a button to upload the file and JSON formatted string in body.

<template>
    <lightning-card title="JSON Uploader" icon-name="custom:custom63">
        <lightning-button label="Upload JSON" onclick={handleSave} slot="actions"></lightning-button>
        <template if:true={jsonString}>
            <div class="scroller">
                <pre>{jsonString}</pre>
            </div>
        </template>
    </lightning-card>
</template>

jsonInLwc.js

The JS file of the component has defined a property with default JSON object which will used to save as file. It also has a getter with name jsonString which holds the formatted JSON string. handleSave method invoke the saveJsonAsFile method defined in JsonController apex class.

import { LightningElement } from 'lwc';
import saveJsonAsFile from '@salesforce/apex/JsonController.saveJsonAsFile';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class JsonInLwc extends LightningElement {
    //property with default json object as value
    blogdetail = {
        name: 'Salesforce Diaries',
        author: 'Sanket',
        url: 'https://salesforcediaries.com/',
        focus: 'LWC',
        startedIn: '2020',
        numberOfPost: '100',
        motive: 'help developers'
    };

    //format the json object to show it on ui
    get jsonString() {
        return JSON.stringify(this.blogdetail, null, 2);
    }

    //save the file
    handleSave() {
        saveJsonAsFile({ obj: this.blogdetail })
            .then((result) => {
                const event = new ShowToastEvent({
                    title: 'File Uploaded',
                    message: 'file has been successfully uploaded, File Id is: ' + result,
                    variant: 'success'
                });
                this.dispatchEvent(event);
            })
            .catch((error) => {
                console.log(error);
            });
    }
}

jsonInLwc.css

The CSS file of the component has been used to build scroller to show formatted JSON object on UI.

.scroller {
    height: 200px;
    overflow: auto;
    padding: var(--lwc-varSpacingXSmall, 8px);
    border: solid var(--lwc-borderWidthThin, 1px) #eee;
}

jsonInLwc.js-meta.xml

The xml defines the metadata of the component. We have exposed this component to different lightning pages. You can use this component with Home, Record or App Page in Lightning.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

JsonController.cls

The apex controller of the lightning web component has a method which accept parameter of type Object and saves that within a file.

public with sharing class JsonController {
    @AuraEnabled
    public static string saveJsonAsFile(Object obj){
        try {
            ContentVersion ContVerFile = new ContentVersion();
            ContVerFile.VersionData = Blob.valueOf(JSON.serialize(obj));
            ContVerFile.Title = 'JSON From LWC'; 
            ContVerFile.ContentLocation= 's';
            ContVerFile.PathOnClient='JSON From LWC.txt';
            ContVerFile.FirstPublishLocationId = userinfo.getUserid();
            insert ContVerFile;
            return ContVerFile.Id;
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
}

Deploy your Apex controller as well as Lightning Web Component. Once successfully deployed, You can place the component on Lightning Page to test it.

Demo – Save JSON as File and Show JSON

You can visit https://salesforcediaries.com/category/lightning-web-component/ to get more update on Lightning Web Component.

The post Save JSON as File and Show JSON in LWC appeared first on Salesforce Diaries.

July 16, 2022 at 10:12PM
Click here for more details...

=============================
The original post is available in Salesforce Diaries by sanketthoughts
this post has been published as it is through automation. Automation script brings all the top bloggers post under a single umbrella.
The purpose of this blog, Follow the top Salesforce bloggers and collect all blogs in a single place through automation.
============================