All SLDS-BOX have an equal height using Flexbox in LWC

 

HTML

<ul class="list slds-p-around_large" >

<li class="list-item slds-box slds-box_xx-small slds-p-horizontal_large">

<div class="list-content">

<img src={xyz1} >

<div>

Header1

</div>

<p>

SubHeading 1

</p>

<lightning-button label="View" onclick={handleView} class="slds-float_left">

</lightning-button>

</div>

</li>

<li class="list-item slds-box slds-box_xx-small slds-p-horizontal_large">

<div class="list-content">

<img src={xyz2} >

<div>

Header2

</div>

<p>

SubHeading 2

SubHeading 2

SubHeading 2

SubHeading 2

</p>

<lightning-button label="View" onclick={handleView} class="slds-float_left">

</lightning-button>

</div>

</li>

</ul>

CSS

.list {

display: flex;

flex-wrap: wrap;

}

@media all and (min-width: 30em) {

.list-item {

width: 30%;

}

}

.list-item {

display: flex;

padding: 0.5em;

margin: 12px 18px 12px 18px;

}

.list-content {

display: flex;

flex-direction: column;

padding: 1em;

width: 100%;

}

.list-content p {

flex: 1 0 auto;

text-align: justify;

}

.list-content img {

width: 400px;

height: 300px

}

Get Salesforce instance URL in Apex (Salesforce)

URL Class

Represents a uniform resource locator (URL) and provides access to parts of the URL. Enables access to the base URL used to access your Salesforce org.

getOrgDomainUrl() 

Returns the canonical URL for your org.

For example, https://MyDomainName.my.salesforce.com.

String orgDomainUrl=System.URL.getOrgDomainUrl().toExternalForm();

System.debug(orgDomainUrl);

getSalesforceBaseUrl() 

Returns the URL of current connection to the salesforce org.

For example, https://MyDomainName.my.salesforce.com or 

https://MyDomainName.lightning.force.com

String baseUrlSalesforce=System.URL.getSalesforceBaseUrl().toExternalForm();

System.debug(baseUrlSalesforce);

The following example creates a link to a Salesforce record. The full URL is created by concatenating the Salesforce base URL with the record ID.

Account acct = [SELECT Id FROM Account WHERE Name = 'Acme' LIMIT 1];

String fullRecordURL = System.URL.getSalesforceBaseUrl().toExternalForm() + '/' + acct.Id;

getCurrentRequestUrl() 

Returns the URL of an entire request on a salesforce Instance.

An example of a URL for an entire request is

https://yourInstance.salesforce.com/apex/myVfPage.apexp

String currentUrlSalesforce=System.URL.getCurrentRequestUrl().toExternalForm();

System.debug(currentUrlSalesforce);

// Get the query string of the current request.

System.debug('Query: ' + System.URL.getCurrentRequestUrl().getQuery());

How To Redirect Your Users When Flows Finish (retURL)

 

To redirect users to a specific page in Salesforce after they click Finish:

/flow/flowName?retURL=url

For example: Redirect to Account Home Page

/flow/myFlow?retURL=001/o 

URL Options

You can't redirect flow users to a URL that’s external to your Salesforce org.

REDIRECT DESTINATION	RELATIVE URL (url)	EXAMPLE
Chatter	_ui/core/chatter/ui/ChatterPage	_ui/core/chatter/ui/ChatterPage
Home page	home/home.jsp	home/home.jsp
List view	objectCode?fcf=listViewId	006?fcf=00BD0000005lwec
Object home page, such as Accounts home	objectCode/o	001/o
Specific record, such as a contact, report, dashboard, user, profile, or Chatter post	recordId	0D5B000000SKZ7V
Visualforce page	apex/pageName	apex/myVisualforcePage

Use Lightning Web Components in External Website

 

In this blog, we'll look at how to use Lightning Web Components (LWC) on a public website. I'll walk you through each step so you can use it without any problems.

First, develop a Lightning Web Component that will be accessible without requiring a login. Insert the necessary markup into the Lightning Web Component. Here if you see the LWC html we have a property {recId}, we are going to pass this value from the URL. Which we will see in the later steps.

examspagelwc.html

<template>

<lightning-card>

Hi <b> {recId} </b>

</lightning-card>

</template>

examspagelwc.js

import { LightningElement } from 'lwc';

export default class Examspagelwc extends LightningElement {

recId;

connectedCallback() {

const param = 'id';

this.recId = this.getUrlParamValue(window.location.href, param);

}

getUrlParamValue(url, key) {

return new URL(url).searchParams.get(key);

}

}

examspagelwc.js-meta.xml

<?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__HomePage</target>

<target>lightning__RecordPage</target>

</targets>

</LightningComponentBundle>

To make it available to the whole public, we must implement the ltng:allowGuestAccess interface.

quizapp.app

<aura:application extends="ltng:outApp" access="global" implements="ltng:allowGuestAccess" >

<aura:dependency resource="c:examspagelwc"/>

</aura:application>

exampagevf.page

<apex:page showHeader="false" sidebar="false">

<apex:includeLightning /> <!--<apex:includeScript value="/lightning/lightning.out.js" />-->

<script>

$Lightning.use("c:quizapp", function() {

$Lightning.createComponent("c:examspagelwc",

{

},"new",

function(cmp) {

console.log('LWC Componenet added in VF page');

});

});

</script>

<div id="new"></div>

</apex:page>

Go to Setup

From Sites and Domains, Select sites

Click on NEW

Give the Site Label

For Active site home page click on lookup and select your VF Page

Then click Save button AND Activate the site.

Now copy the the site url and pass the parameter that we are passing in lwc js to show it in our lwc html.

For example:

if site URL is:- https://2022quizapp-developer-edition.ap26.force.com/

then we need id to pass in the url. so our url look like this:

https://2022quizapp-developer-edition.ap26.force.com/?id=201

So when we open this url, our LWC will show Hi 201