Skip to main content
Hello Everyone,

I am trying to creat a custom button on Account object to create a new case. I have created a LWC component and hosted it in an Aura component so that it can be used as a quick Action. Now when a user click on create button i want it to navigate to another LWC component which has my record edit form to create case. This compoenent is also hosted in Aura component. Can somebody help me how to achieve the same. 

below is my code 

Aura Component 

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,lightning:isUrlAddressable" >

    <c:caseRecordType recordId="{!v.recordId}"/>

</aura:component>

Lwc Comonent 

<template>

    <lightning-card title="Record Type Selector in Lightning Web Component">

            <lightning-layout multiple-rows="true" vertical-align="end">

                <lightning-layout-item size="6" small-device-size="2" medium-device-size="4" large-device-size="4" padding="around-small">

                        <div class="slds-form-element">

                            <div class="slds-form-element__control">

                                <lightning-combobox name="recordTypes"

                                                    label="Case Record Types"

                                                    value={selectedValue}

                                                    placeholder="-Select-"

                                                    options={options}

                                                    onchange={handleChange} ></lightning-combobox>

                            </div>

                        </div>

                </lightning-layout-item>

            </lightning-layout><br/>

            Selected Account Id : {recordId}

        <div style="margin-left:3%;">

            <div if:true={selectedValue}>

                Selected Record Type Id: <b>{selectedValue}</b><br/>

                

            </div>

        </div>

        <div style="margin-left:3%;">

            <lightning-button label="Create" name="Create" title="Create a New Case" variant="brand"

            onclick={createNewCase} ></lightning-button>

        </div>

    </lightning-card>

    

</template>

LWC Js 

import { LightningElement,api,track,wire } from 'lwc';

import { getObjectInfo } from 'lightning/uiObjectInfoApi';

import CASE_OBJECT from '@salesforce/schema/Case';

import {NavigationMixin } from 'lightning/navigation';

import { encodeDefaultFieldValues } from 'lightning/pageReferenceUtils';

export default class CaseRecordType extends NavigationMixin(LightningElement) {

    @api recordId;

    @track selectedValue;

    @track options = [];

    @wire(getObjectInfo, { objectApiName: CASE_OBJECT })

    accObjectInfo({data, error}) {

        if(data) {

            let optionsValues = [];

            // map of record type Info

            const rtInfos = data.recordTypeInfos;

            // getting map values

            let rtValues = Object.values(rtInfos);

            for(let i = 0; i < rtValues.length; i++) {

                if(rtValues[i].name !== 'Master') {

                    optionsValues.push({

                        label: rtValues[i].name,

                        value: rtValues[i].recordTypeId

                    })

                }

            }

            this.options = optionsValues;

        }

        else if(error) {

            window.console.log('Error ===> '+JSON.stringify(error));

        }

    }

     

    // Handling on change value

    handleChange(event) {

        this.selectedValue = event.detail.value;

    }

    createNewCase(){

        const defaultValues = encodeDefaultFieldValues({

            AccountId: this.recordId

        });

        let temp = {

            type: 'standard__component',

           //type: 'standard__objectPage',

            attributes: {

                componentName: 'c__caseNavigation'

                //objectApiName: 'Case',

                //actionName: 'new'

            },

            state:{

            }

            /*state : {

                recordTypeId: this.selectedValue,

                nooverride: '1',

                defaultFieldValues: defaultValues

            }*/

        };

        this[NavigationMixin.Navigate](temp);

    }

}

LWC Record edit form 

template>

    <lightning-card title = "Create New Case">

        <lightning-record-edit-form id="recordViewForm"                    

                                object-api-name="Case">

            <lightning-messages></lightning-messages>

            <lightning-input-field field-name="AccountId"></lightning-input-field>

            <lightning-input-field field-name="RecordTypeId"></lightning-input-field>

            <lightning-input-field field-name="Status"></lightning-input-field>

            <!-- submit -->

            <lightning-button type="submit" label="Update record"></lightning-button>

        </lightning-record-edit-form>

    </lightning-card>

</template>

Aura Compoent 

<aura:component implements="lightning:isUrlAddressable" >  

    <c:caseForm />

</aura:component>

 
1 件の回答
  1. 2020年2月22日 14:30
    Hi Abhishek,

    Your code looks fine, please check thoroughly the spelling of the components.
0/9000