Pass Record Id from Salesforce Site URL to LWC

Question

I am trying to pass a parameter (a record id) from a Salesforce Site URL to an embedded Lightning Web Component to create a pre-filled web form for the end user to access once they click on the unique site link. While I am able to display the recordId in the LWC's HTML markup (using the @api decorator), I am unable to "fully access" it in order to query the record and display its values. The "LWC:else" conditional logic is triggered each time in the HTML file. I am using the standard "getRecord" wire adapter to retrieve the record. To that end, I tried hard-coding the actual record id I want to query and still no results were returned, which was very unexpected. I made sure the "site profile" associated with the guest user of the Salesforce site has access to the Visualforce page that is embedded on the Salesforce site and has full access to the custom object itself. Does any additional code need to be added to the JS file, or is there perhaps an inherent limitation with what I'm trying to achieve? Thank you in advance for any assistance.

Visualforce Page

<apex:page sidebar="false" showHeader="false" applyHtmlTag="false" lightningStylesheets="true">
    the edited url: https://xxxxx.sandbox.my.salesforce-sites.com/oba?Id=a3AEa0000001MsvMAE <br/>
    from visualforce: {!$CurrentPage.parameters.Id}
    <apex:includeLightning />
       <div id="compContainer" />
        <script>
            $Lightning.use('c:obaApp', function() {
                $Lightning.createComponent(
                    "c:obaForm",
                    {
                        Id: "{!$CurrentPage.parameters.Id}"
                    },
                    "compContainer",
                    function(cmp) {
                        console.log('{!$CurrentPage.parameters.Id}');
                    }
                );
            },
         'https://xxxxx.sandbox.my.salesforce-sites.com/oba/'  // Edited Site endpoint             
          );
        </script>
</apex:page>

Aura Application

<aura:application access="GLOBAL" extends="ltng:outApp"
    implements="ltng:allowGuestAccess">
<aura:dependency resource="c:obaForm"/></aura:application>

LWC JS File

import { LightningElement, api, wire, track } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
//import NAME_FIELD from '@salesforce/schema/Outside_Business_Activity__c.Name';
import getObaForm from '@salesforce/apex/outsideBusinessActivity_Handler.getObaForm';


const FIELDS = ['Outside_Business_Activity__c.Name']
    
export default class ObaForm extends LightningElement {
    @api Id;

    obaForm;
    
    /*@wire(getRecord, {recordId: '$Id', fields: FIELDS})
    handleObaFormWire({error,data}){
      if (data){
        console.log('data:'+data);
        return;
      } else if(error){
          console.log('error: '+error);
          return;
        } 
    }*/ //Commented out to test the button click 

    showRecord() {
      getObaForm({recordId: '$Id'})
      .then((result) => {
        this.obaForm = result;
        this.error = undefined;
        console.log('result: '+result);
      })
      .catch((error) => {
        this.error = error;
        this.obaForm = undefined;
        console.log('error: '+error);
      });
    }

    /*get obaName() {
      if(this.connected == true) {
        return this.obaForm.data ? getSObjectValue(this.obaForm.data, NAME_FIELD) : '';
      }
  }*/
}

LWC HTML File

<template>
    <p>from lwc: {Id}</p>

    <br/>

    <div class="slds-var-m-around_medium">
        <lightning-button label="Show OBA Form" onclick={showRecord}></lightning-button>
    </div>

    <div lwc:if={obaForm}> 
        <p>connected: <lightning-formatted-text value={obaName} ></lightning-formatted-text></p>
    </div>
    <div lwc:else>
        obaForm.data is not shown.
    </div>
</template>

Apex Class

public class outsideBusinessActivity_Handler {
    @AuraEnabled(cacheable=true)
    public static Outside_Business_Activity__c getObaForm(String recordId) {

        Outside_Business_Activity__c obaForm = [SELECT Id, Name
                                                            FROM Outside_Business_Activity__c
                                                           WHERE Id = :recordId];
        return obaForm;

    }
}

Answer 1

This is more a way of debugging than a full answer, but if you use a method handler for your wire adaptor, you will be able to display the error you are getting.

@wire(getRecord, {recordId: '$Id', fields: NAME_FIELD})
handleObaFormWire({error,data}){
  if (error){
    console.log(error);
    return;
  } 
  this.obaForm["data"] = data;
}

Because the handler destructures the result into data and error you can actually just save your data object and directly reference that in your getters.