0

I have created a custom LWC component for customer registration for community portal. But there are no options to select LWC component in the Registration Page Configuration.

enter image description here

So that I have added the LWC inside visualforce page.

Is there any possibility to use LWC directly( without visualforce page) for community user registration?

Thanks.

0

You can create a visualforce page which will embed a Lightning Component (Aura), which will embed your LWC

Doc to include an aura component in visualforce page: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_visualforce.htm

Doc to include a LWC in an aura component: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.interop_aura_composition

Here is an example of such page (using a splash screen image, or a loading spinner if you uncomment the related html)

<apex:includeLightning />

<html class="irm-scope"> 
    <head>
        <title>{!$Label.BrowserTabLabel}</title>
        <apex:slds />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" id="viewPortvfAppCloudIRMIncluder"/>
    </head>

    <body class="irm-scope">

        <div id="LoadingvfDIV" style="">
            <img src="{!splashScreenImage}" style="max-width: -webkit-fill-available; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0;"/>

              <!--<div role="status" class="slds-spinner slds-spinner_medium">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
              </div> -->
        </div>  


        <div id="lightningvfDIV" style="min-height: 100% !important;display:none;"/>

        <script>
        var alias = '{!$User.Alias}';
        var pathArray = window.location.pathname.split('/');

        // Parse URL query parameters as object
        var pageQueryParams = {} ;
        var queryParamsStr = window.location.search.substr(1);
        if (queryParamsStr != null && queryParamsStr.length > 0)
        {
            queryParamsStr.split("&").forEach(function(part) {
                var item = part.split("=");
                pageQueryParams[item[0]] = decodeURIComponent(item[1]); 
            });
        }
        else
            pageQueryParams = null ;

        if (  alias == "guest" || alias == null )
        {
            // Redirect to login page if user not logged
            window.location.href= "/"+pathArray[1]+"/login?"+queryParamsStr; 
        }
        else
        {
                var LightningAppContainer = 'c:AppWebApp4vf';
                // Force viewport in headers
                $Lightning.use(LightningAppContainer, function() {
                    $Lightning.createComponent("c:CmpWebApp", // Component name
                                               {   // Component parameters
                                                   'slds' : false ,
                                                   'isIncludedByVFPage' : true,
                                                   'initExternalContextParams': pageQueryParams,
                                                   'splashScreenImage' : '{!splashScreenImage}'
                                               },
                                               "lightningvfDIV",
                                               function(cmp,err) {
                                                   // Hide loading div and display lightning div
                                                   var loadingDivElt = document.getElementById("LoadingvfDIV");
                                                   loadingDivElt.style.display = 'none' ;
                                                   var ltngDivElt = document.getElementById("lightningvfDIV");
                                                   ltngDivElt.style.display = 'block' ;
                                                   console.log('AppWebApp VF Page includer initialized'); 
                                               });
                    // }); 
            });

        }
        </script> 
    </body>
</html>

| improve this answer | |
  • Hi Nicolas Vuillamy, I have already try this. But I want to use the LWC directly without visualforce page. I want know whether it is possible? – Thirumagal Jan 27 at 4:25
  • If the choice is not proposed in the picklist, I assume it is not :/ – Nicolas Vuillamy Jan 27 at 10:18
  • We can add the LWC component into lightning app builder. This is the solution. – Thirumagal Feb 3 at 4:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.