How To Utilize URLs For Connection Between Two Community Pages

In this blog post, we will explore the process of using URLs to establish connections between two community pages. In this scenario, an input parameter is incorporated into the community link.

To achieve this, follow the instructions outlined below:

Step 1: Developing Community Pages

We must develop the initial community pages. We will create two community pages, one to accept input and the other to display it.

To make a new page, select New Page.

Step 2: Developing an LWC to Receive Input

In this blog, we use two lwc components, one to take input and the other to display output. Create the LWC component to take input from the user and add the parameter to the URL.

Code:

HTML

<template>
    <lightning-card title="Servey form">
        <div class="slds-m-around_medium">
            <h2>Customer Interest Profile</h2>
            <p>Thank you for your support. We look forward to serving you!</p>
            <lightning-input type="text" label="Enter Name" value={name}  onchange={handleNameChange} class="slds-p-around_medium"></lightning-input>
            <lightning-input type="tel" label="Enter Phone" value={phone}  onchange={handlePhoneChange} class="slds-p-around_medium"></lightning-input>
            <lightning-combobox label="Are you visiting our website for the first time?" options={interestOptions} value={selectedInterest}  onchange={handleInterestChange} class="slds-p-around_medium"></lightning-combobox>
           <lightning-button label="submit" variant="brand" onclick={appendInputToUrl}  class="slds-m-around_small" style="margin-top:10px;"></lightning-button>
        </div>
    </lightning-card>
</template>

Js

import { LightningElement } from 'lwc';

export default class CustomerInterestForm extends LightningElement {

     name = 'John';
     phone = '9878654350';
     selectedInterest = 'Yes'; 
     appendedUrl = 'https://OrgLocation.com/YourCommunityName/s/PageName?';
 
    interestOptions = [
        { label: 'YES', value: 'Yes' },
        { label: 'NO', value: 'No' },
       
    ];
    handleNameChange(event) {
        this.name = event.target.value;
    }

    handlePhoneChange(event) {
        this.phone = event.target.value;
    }

    handleInterestChange(event) {
        this.selectedInterest = event.target.value;
    }

    appendInputToUrl() {
        const nameParam = encodeURI(this.name);
        const phoneParam = encodeURI(this.phone);
        const interestParam = encodeURI(this.selectedInterest);
         //https://OrgLocation.com/CommunityName/s/PageName?ParameterName1=Value1&ParameterName2=Value2
         this.appendedUrl = `https://OrgLocation.com/YourCommunityName/s/PageName?Name=${nameParam}&phone=${phoneParam}&interest=${interestParam}`;
     window.location.href = this.appendedUrl;
    }
}

Step 3: Creating LWC for output

Now we are creating another LWC component to display the input parameter and dynamics data

Code:

HTML

<template>
    
    <div class="container" >
        <lightning-card class="card">
         <div class="slds-m-around_medium">
                <template if:true={isInterested}>
                    <p class="info1"> Thank You for your Response</p>
                    <p class="info">Dear {extractedTestt},</p>
                    <p class="info">A warm and hearty welcome to our portal! 
                       </p>
                        <p class="info"> We are absolutely delighted to have you on board as our new customer.</p>
                </template>
                <template if:false={isInterested}>
                    <p  class="info1">Welcome Back to Our Portal!</p>
                    <p class="info">Dear {extractedTestt} , </p>
                    <p class="info">We are thrilled to have you back with us! </p>
                    <p class="info">Welcome back to our portal, where you can access all our exclusive services and features.</p>
                </template>
            </div>
        </lightning-card>
    </div>

</template>

Js

import { LightningElement } from 'lwc';

export default class OutputForm extends LightningElement {


    currentUrl = window.location.href;
    extractedPhone = '';
    extractedInterest = '';
    extractedTestt = '';
    isInterested=false;
    connectedCallback() {
        this.extractKeyValueFromUrl();
        
    }

    extractKeyValueFromUrl() {
        const urlParams = new URLSearchParams(window.location.search);
        
        // Extract "phone" value
        const phoneValue = urlParams.get('phone');
        if (phoneValue) {
            this.extractedPhone = phoneValue;
        } else {
            this.extractedPhone = ' ';
        }

        // Extract "interest" value
        const interestValue = urlParams.get('interest');
        if (interestValue) {
            this.extractedInterest = interestValue;
            if(this.extractedInterest=='Yes'){
             this.isInterested=true;
            }else{
              this.isInterested=false;
            }
        } else {
            this.extractedInterest = ' ';
        }

        // Extract value for Name
        const testtValue = urlParams.get('Name');
        if (testtValue) {
            this.extractedTestt = testtValue;
        } else {
            this.extractedTestt = ' ';
        }
    }
}

Conclusion

You can use a dynamic parameter in the URL to display information about a specific topic. There is no need to use a specific database; simply tell the webpage what news you want to see. Instead of communicating with a database, you tell the webpage what to do. It is quick and easy to send information via URL.