Convert XML string to blob using Javascript

 This post explain how to convet to XML string to Blob and you can sent blob to servers.

   convertXMLStringToblob = (xmlstring) => {
      // Convert xml string to base64data
     let xmlval = new DOMParser().parseFromString(xmlstring, 'application/xml');
     let base64Data = window.btoa((new XMLSerializer()).serializeToString(xmlval));
   
     // Convert base64data to blob
     const byteCharacters = window.atob(base64Data);
     const byteNumbers = new Array(byteCharacters.length);
     for (let i = 0; i < byteCharacters.length; i++) {
       byteNumbers[i] = byteCharacters.charCodeAt(i);
     }
     const byteArray = new Uint8Array(byteNumbers);
     return new Blob([byteArray], {type:'application/xml'});
   }

Sample file

Show alerts using Lightning Web Componets(LWC)

This post explains how to create the notifications alerts using lightning web components(lwc).

lightning/alert module lets you create an alert modal within your component. Use LightningAlert on your components to communicate a state that affects the entire system, not just a feature or page.

HTML

<template>
	<div class="slds-align_absolute-center slds-theme_default">
		<lightning-button-group>
			<lightning-button label="Default" title="default" onclick={handleClick}></lightning-button>
			<lightning-button label="Shade Alert" title="shade" onclick={handleClick}></lightning-button>
			<lightning-button label="Inverse Alert" title="inverse" onclick={handleClick}></lightning-button>
			<lightning-button label="Alt-inverse Alert" title="alt-inverse" onclick={handleClick}></lightning-button>
			<lightning-button label="Success Alert" title="success" onclick={handleClick}></lightning-button>
			<lightning-button label="Info Alert" title="info" onclick={handleClick}></lightning-button>
			<lightning-button label="Warning Alert" title="warning" onclick={handleClick}></lightning-button>
			<lightning-button label="Error Alert" title="error" onclick={handleClick}></lightning-button>
			<lightning-button label="Offline Alert" title="offline" onclick={handleClick}></lightning-button>
		</lightning-button-group>
	</div>
</template>

Javascript

import { LightningElement } from 'lwc';
import LightningAlert from 'lightning/alert';

export default class LightningAlerts extends LightningElement {

    handleClick(event) {
        if (!event.currentTarget.title) return;
        let themeType = event.currentTarget.title;
        let msg = 'This is test alert';
        switch (themeType) {
            case 'shade':
                this.showAlerts(msg, 'shade', 'Hey Salesforce!!');
                break;
            case 'inverse':
                this.showAlerts(msg, 'inverse', 'Hey Salesforce!!');
                break;
            case 'alt-inverse':
                this.showAlerts(msg, 'alt-inverse', 'Hey Salesforce!!');
                break;
            case 'success':
                this.showAlerts(msg, 'success', 'Hey Salesforce!!');
                break;
            case 'info':
                this.showAlerts(msg, 'info', 'Hey Salesforce!!');
                break;
            case 'warning':
                this.showAlerts(msg, 'warning', 'Hey Salesforce!!');
                break;
            case 'error':
                this.showAlerts(msg, 'error', 'Hey Salesforce!!');
                break;
            case 'offline':
                this.showAlerts(msg, 'offline', 'Hey Salesforce!!');
                break;
            default:
                this.showAlerts(msg, '', 'Hey Salesforce!!');
        }

    }

    async showAlerts(msg, theme, label) {
        await LightningAlert.open({
            message: msg,
            theme: theme,
            label: label
        });
    }
}

Config Meta file

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

Demo

Dynamically Add/Remove rows using Lightning Web Components(LWC)

 This post explains how to add/remove the rows using the Lighting web component(LWC).

HTML Code:

<template>
   <lightning-card>
      <lightning-spinner if:true={isSpinner} variant="brand" size="large"> </lightning-spinner>
      <lightning-layout>
         <lightning-layout-item size="12">
            <lightning-button class="slds-float--right slds-m-around_small" variant="brand" label="Save"
               onclick={saveRows}>
            </lightning-button>
            <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-border_left slds-border_right"
               aria-labelledby="element-with-table-label other-element-with-table-label">
               <thead>
                  <tr>
                     <th>Name</th>
                     <th>Industry</th>
                     <th>Phone</th>
                     <th>Email</th>
                     <th></th>
                  </tr>
               </thead>
               <tbody>
                  <template for:each={filterList} for:item="filterData" for:index="index">
                     <tr key={filterData}>
                        <td>
                           <lightning-input type="text" name="accName" data-index={index}
                              variant="label-hidden" placeholder="" onchange={handleChange}
                              value={filterData.Name}>
                           </lightning-input>
                        </td>
                        <td>
                           <lightning-combobox name="industry" data-index={index} variant="label-hidden"
                              placeholder="" onchange={handleChange} value={filterData.Industry}
                              options={industryOptions}>
                           </lightning-combobox>
                        </td>
                        <td>
                           <lightning-input type="text" name="accEmail" data-index={index}
                              variant="label-hidden" placeholder="" onchange={handleChange}
                              value={filterData.Email}>
                           </lightning-input>
                        </td>
                        <td>
                           <lightning-input type="text" name="accPhone" data-index={index}
                              value={filterData.Phone} variant="label-hidden" onchange={handleChange}>
                           </lightning-input>
                        </td>
                        <td>
                           <lightning-button-icon data-index={filterData.id} class="slds-float--right"
                              icon-name="action:new" onclick={handleAddRow}></lightning-button-icon>
                           <lightning-button-icon data-index={filterData.id} class="slds-float--right"
                              icon-name="action:delete" onclick={handleRemoveRow}></lightning-button-icon>
                        </td>
                     </tr>
                  </template>
               </tbody>
            </table>
         </lightning-layout-item>
      </lightning-layout>
   </lightning-card>
</template>

JS Code:

import { LightningElement, wire } from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import saveAccounts from '@salesforce/apex/LWCExampleController.saveAccounts';

export default class DynamicallyAddRow extends LightningElement {
    industryOptions = [{ value: '-None-', label: '' }];
    filterList = [];
    keyIndex = 0;
    isSpinner = false;

    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    accountinfo;

    @wire(getPicklistValues, { recordTypeId: '$accountinfo.data.defaultRecordTypeId', fieldApiName: INDUSTRY_FIELD })
    industryValues({ data, error }) {
        if (data) {
            data.values.forEach(val => {
                this.industryOptions = [...this.industryOptions, { value: val.value, label: val.label }];
            });
        }
        else if (error) {
            this.processErrorMessage(error);
        }
    }

    connectedCallback() {
        this.handleAddRow();
    }

    handleChange(event) {
        if (event.target.name == 'accName') {
            this.filterList[event.currentTarget.dataset.index].Name = event.target.value;
        }
        else if (event.target.name == 'industry') {
            this.filterList[event.currentTarget.dataset.index].Industry = event.target.value;
        }
        else if (event.target.name == 'accEmail') {
            this.filterList[event.currentTarget.dataset.index].Email = event.target.value;
        }
        else if (event.target.name == 'accPhone') {
            this.filterList[event.currentTarget.dataset.index].Phone = event.target.value;
        }
    }

    handleAddRow() {
        let objRow = {
            Name: '',
            Industry: '',
            Phone: '',
            Email: '',
            id: ++this.keyIndex
        }

        this.filterList = [...this.filterList, Object.create(objRow)];
    }

    handleRemoveRow(event) {
        this.filterList = this.filterList.filter((ele) => {
            return parseInt(ele.id) !== parseInt(event.currentTarget.dataset.index);
        });

        if (this.filterList.length == 0) {
            this.handleAddRow();
        }
    }

    saveRows() {
        console.log('this.filterList => ', this.filterList);
        this.isSpinner = true;
        saveAccounts({ lstAccs: this.filterList }).then(result => {
            this.isSpinner = false;
            this.showToastMessage('success', 'Accounts Saved Successfully!!', 'Success');
            this.filterList = [];
            if (this.filterList.length == 0) {
                this.handleAddRow();
            }
            console.log('result ==> ', result);
        }).catch(error => {
            this.processErrorMessage(error);
            this.isSpinner = false;
        })
    }

    processErrorMessage(message) {
        let errorMsg = '';
        if (message) {
            if (message.body) {
                if (Array.isArray(message.body)) {
                    errorMsg = message.body.map(e => e.message).join(', ');
                } else if (typeof message.body.message === 'string') {
                    errorMsg = message.body.message;
                }
            }
            else {
                errorMsg = message;
            }
        }
        this.showToastMessage('error', errorMsg, 'Error!');
    }

    showToastMessage(variant, message, title) {
        this.dispatchEvent(
            new ShowToastEvent({
                title: title,
                message: message,
                variant: variant
            })
        );
    }
}

Apex Class:

public inherited sharing class LWCExampleController {

    @AuraEnabled
    public static List<Account> saveAccounts(List<Account> lstAccs) {
        try {
            insert lstAccs;
            return lstAccs;
        }
        catch(Exception ex) {
            throw new AuraHandledException(ex.getMessage());
        }
    }
}

Output: