Create a Custom Page Template with LWC

lightning-web-components

In Lightning App builder, the template I want isn't there.
My goal is to create a Custom Page Template with a Header section, and 2 side-by-side column sections.

If I'm using aura, I'd simply follow this guide
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app_builder_template_component.htm

I cannot find the equivalent guide for LWC

Best Answer

If such a feature existed, it would be mentioned in the XML Configuration File Elements documentation. As it does not (at the time of this answer), this is presumably not possible at the moment. I didn't immediately find any suggestion that this is coming out in the next release or later, so we don't know when, or if, this might be added to LWCs. For now, this is an area you'll still need to use Aura for.

Related Solutions

[SalesForce] Is it possible to disable Locker Service for Lightning Web Components? (I mean LWC and not Aura Components!)

In LWC, Lightning Locker is always enabled to enforce code isolation.

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.security_locker_service

Are you facing an issue with Locker? We monitor these forums and try to address the concerns as they come up.

[SalesForce] $A.util.addClass() and $A.util.removeClass() in Lightning Web Components

You can use the standard element classList property for it (see here)

Like:

Template

<template>
    <div>Hello World!</div>
    <lightning-button label="Add" onclick={addClass}></lightning-button>
    <lightning-button label="Remove" onclick={removeClass}></lightning-button>
    <lightning-button label="Toggle" onclick={toggleClass}></lightning-button>
</template>

Controller:

import { LightningElement } from 'lwc';

export default class App extends LightningElement {

    addClass() {
        this.template.querySelector('div').classList.add('red');
    }

    removeClass() {
        this.template.querySelector('div').classList.remove('red');
    }

    toggleClass() {
        this.template.querySelector('div').classList.toggle('red');
    }
}

Example: https://developer.salesforce.com/docs/component-library/tools/playground/b-iFXjvxr/1/edit

Best Answer

Related Solutions

[SalesForce] Is it possible to disable Locker Service for Lightning Web Components? (I mean LWC and not Aura Components!)

[SalesForce] $A.util.addClass() and $A.util.removeClass() in Lightning Web Components

Related Topic