Opening a corresponding record via button

Question

I've tried to search in different locations but I can only see on most is "create button record"

My goal here is to create a custom button in my property booking object record page where in when I click that button it will navigate to the corresponding child record which is the quotation object.

In my app duplicates are not allowed so it will only open 1 quotation records that has the parent/master record.

Text Version of what I am trying to do...

"A button which when clicked should navigate to the corresponding quotation record / related quotation record of the property booking record"

Sample Property Booking record:

Id like to add a button here when if it is clicked it will go directly to the image below to the quotation record I know this is kind of done using navigationmixin.navigate but most tutorials I see is they use a lightning-record-view which in my case I dont need to

Sample Quotation Record: Booking Ref is the Master/Parent.

I don't know if I got this right but the relationship of my property booking record and quotation record is like this.

Viewed from the fields and relationship of the quotation object:

Lookup(Property Booking)

UPDATE: I have found that it is showing under my related list.

I have used the following code to navigate to it with this, but with no luck its not opening.

openQuote.js

import { LightningElement,api,wire } from 'lwc';
import { NavigationMixin} from 'lightning/navigation';
import { getRecord } from 'lightning/uiRecordApi';


export default class OpenQuote extends NavigationMixin(LightningElement){
    //
    @api recordId;

    recordViewMode(){
        this[NavigationMixin.Navigate]({
            type: 'standard__recordRelationshipPage',
            attributes:{
                recordId: this.recordId,
                objectApiName:'Property_Booking__c',
                relationshipApiName: 'Quotations',
                actionName:'view'
            }
        })
    }
}

openQuote.html

<template>
    <lightning-card title='Open Corresponding Quotation'>
        <lightning-button variant="brand" 
        label="Open Quote"
        onclick={recordViewMode}>
        </lightning-button>
    </lightning-card>
</template>

openQuote.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__RecordPage</target>
    </targets>
</LightningComponentBundle>

When I click the button open quote this is the result:

Answer 1

I found out the solution to this. I created a custom action from the object and edited my page layout. Now when I click the button it navigates me to the related quotation record.

openQuote.js

import { LightningElement,api,wire } from 'lwc'
import { NavigationMixin} from 'lightning/navigation'
import { ShowToastEvent } from 'lightning/platformShowToastEvent'
import getQuotationId from '@salesforce/apex/QuotationHandler.getQuotationId'


export default class OpenQuote extends NavigationMixin(LightningElement){
    
    @api recordId;
    

    //execute everytiome the action is triggered
    @api invoke(){
        getQuotationId({qId: this.recordId}).
            then(result=>{
                this[NavigationMixin.Navigate]({
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: result,
                        objectApiName: 'Quotation__c',
                        actionName: 'view'
                    }
                });
            }).catch(error=>{
                this.dispatchEvent(new ShowToastEvent({
                    title: 'Failed to find quotation for this property booking record',
                    message: 'Error: ' +error.body.mesasge,
                    variant: 'error'})
                );
            });

    }

}

XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Open Quote</masterLabel>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <actionType>Action</actionType>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

APEX

 @AuraEnabled(cacheable=true)
    public static String getQuotationId(Id qId){
        Id findQuote;
        for(Quotation__c quoList :[SELECT Id FROM Quotation__c WHERE Booking_Ref__c = :qId]){
            findQuote = quoList.Id;
        }
        //check if there are no record
        if(findQuote == null){
            throw new AuraHandledException('This property booking does not have a Quotation record');
        }
        return String.valueOf(findQuote);
    }

This is how it looks like now.