lwc developer group

Hi Team,

I am getting XML as a response from REST callout and I am displaying it on LWC HTML using quick action on a custom object.

I am using the below code to beautify/align the XML code(and it got formatted when I view it using console.log) but the it is not displaying the XML response in formatted way in LWC UI

Code I have used to format XML:

formatXml(xml){

    var out = "";

    var tab = "    ";

    var indent = 0;

    var inClosingTag=false;

    var dent=function(no){

        out += "\n";

        for(var i=0; i < no; i++)

            out+=tab;

    }

    for (var i=0; i < xml.length; i++) {

        var c = xml.charAt(i);

        if(c=='<'){

            // handle </

            if(xml.charAt(i+1) == '/'){

                inClosingTag = true;

                dent(--indent);

            }

            out+=c;

        }else if(c=='>'){

            out+=c;

            // handle />

            if(xml.charAt(i-1) == '/'){

                out+="\n";

                //dent(--indent)

            }else{

              if(!inClosingTag)

                dent(++indent);

              else{

                out+="\n";

                inClosingTag=false;

              }

            }

        }else{

          out+=c;

        }

    }

    return out;

}

Format I am getting in console panel of browser(using console.log)

(Attached screenshots)

Code that I have written in HTML

<template>

<lightning-card title="XML for this order">

    <div>

         <p>

            <lightning-formatted-rich-text value={xmldata}></lightning-formatted-rich-text>

        </p>

        </div>

</lightning-card>

</template>

How to get formatted XML in LWC UI also? like I am getting in console.log

@Lightning Champion

I have a custom data table which is used in Flow and bellow is the js-meta.xml file

<?xml version="1.0" encoding="UTF-8"?><LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">    <apiVersion>58.0</apiVersion>    <isExposed>true</isExposed>    <description>Asset Search Table</description>    <masterLabel>Asset Search Table</masterLabel>    <targets>        <target>lightning__FlowScreen</target>    </targets>    <targetConfigs>        <targetConfig targets="lightning__FlowScreen">            <propertyType name="T" extends="sObject" label="Select SObject Type" description="Generic sObject" />            <property name="sobjects" type="{T[]}" label="sObject Collection"/>            <property name="selectedAssets" type="{T[]}" label="Selected sObject Collection"/>        </targetConfig>    </targetConfigs></LightningComponentBundle>

this feature allows search multiple items from the table and go to next step which is not possible in standard datatable but when doing search table is not retendering. This is occurring only in production and working in a UAT(partial copy sandbox)

<template>    <article class="slds-card">        <div class="slds-card__header slds-grid">            <lightning-input type="search" label={label} onchange={search} placeholder="Manufacturer Serial"> </lightning-input>        </div>        <footer class="slds-card__footer">            <lightning-datatable data={filteredData} columns={columns} key-field="Id" selected-rows={selectedIDs} onrowselection={handleRowSelection}>            </lightning-datatable>        </footer>    </article></template> import { LightningElement, api} from 'lwc';const columns = [    { label: 'Asset Name', fieldName: 'Name', type: 'text' },    { label: 'Manufacturer Serial', fieldName: 'Manufacturer_Serial__c', type: 'text' },    { label: 'Product Code', fieldName: 'ProductCode', type: 'text' }];/** * Developer:Sameera De Silva * Description: Allow user to select multiple sObject records and with search function */export default class AssetSearchTable extends LightningElement {    @api selectedAssets = [];    @api sobjects = [];    filteredData = [];    searchKeyWord;    recordCount = 0;    selectedRecordCount = 0;    columns = columns;    label;    selectedIDs=[];    //label displayed near search field    renderedCallback(){        this.label = `Total Assets : ${this.recordCount} | Selected Assets : ${this.selectedIDs.length}`;    }    connectedCallback() {        this.filteredData = [...this.sobjects];        this.recordCount = this.sobjects.length;    }    handleRowSelection(event) {        this.selectedRecordCount =0;        switch (event.detail.config.action) {            case 'selectAllRows':                this.selectedAssets = [...event.detail.selectedRows];                this.selectedAssets.forEach(record=>{                    let idFound = this.selectedIDs.includes(record.Id);                    if(!idFound){                        this.selectedIDs.push(record.Id);                    }                })                this.selectedRecordCount = this.selectedIDs.length;                break;            case 'deselectAllRows':                this.selectedAssets = [];                this.selectedIDs = [];                this.selectedRecordCount = 0;                break;            case 'rowSelect':                let selectId = event.detail.config.value;                let idFound = this.selectedIDs.includes(selectId);                if(!idFound){                    this.selectedIDs.push(selectId);                }                if(this.selectedAssets.length>0){                    event.detail.selectedRows.forEach(record=>{                        if(!this.selectedAssets.find(element=>element.Id==record.Id)){                            this.selectedAssets.push(record);                        }                    })                }else{                    this.selectedAssets = [...event.detail.selectedRows];                }                this.selectedRecordCount = this.selectedIDs.length;                break;            case 'rowDeselect':                let deselectId = event.detail.config.value;                this.selectedIDs.splice(this.selectedIDs.indexOf(deselectId),1);                this.selectedAssets = [...event.detail.selectedRows];                this.selectedRecordCount = this.selectedIDs.length;                break;            default:                break;        }        this.label = `Total Assets : ${this.recordCount} | Selected Assets : ${this.selectedRecordCount}`;    }    search(event) {        this.searchKeyWord = event.detail.value;        this.filteredData =  [...this.sobjects].filter(record => record.Manufacturer_Serial__c.includes(this.searchKeyWord));        console.log(this.filteredData);        let arr = [...this.selectedIDs];        this.selectedIDs = [];        this.selectedIDs = arr;        this.label = `Total Assets : ${this.recordCount} | Selected Assets : ${arr.length}`;    }}

"search" method used in the input box. Also sobject array is a proxy with readonly. Need help on this . Flowing is the way how input sobject collection is showing in console

Bellow is how UAT shows 

#LWC #Flow @Amnon Kruvi @lwc developer group @Amit Singh