Salesforce学习 CommunityCloud（八）实现自定义error页面跳转

2021-01-26 10:25:51 浏览数 (1)

上一篇讲了自定义LogoutPage跳转，在我们正常开发过程中还会遇到需要跳转到自定义的error画面，例如当我们在Lwc中更新某个项目，但是在当前User下，没有更新权限，这样就需要跳转到自定义的Error画面，实现方法是首先做成一个VisualforcePage，用来显示error信息或者固定文言，然后在Community的Error Page装载VisualforcePage,最后在更新处理的方法实现调整，下边是具体步骤。

1.Visualforce Page做成

accessErrorPage.page

代码语言：javascript复制
<apex:page lightningStylesheets="true" showHeader="false">
  <html style="background:white;">
  </html>

  <body style="background-color:white;">
    <center>

      <div class="slds-scope">
        <div>
          <img src="{!$Resource.error_logo}" />
        </div>
        <div>
          <h4 class='slds-text-align--center slds-text-heading--large
             slds-text-color--weak slds-m-bottom--small'>
             AccessErrorScreen
          </h4>
        </div>
      </div>
    </center>
  </body>
</apex:page>

accessErrorPage.page-meta.xml

代码语言：javascript复制
<?xml version="1.0" encoding="UTF-8"?>
<ApexPage xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <availableInTouch>true</availableInTouch>
    <confirmationTokenRequired>false</confirmationTokenRequired>
    <label>accessErrorPage</label>
</ApexPage>

2.Community ErrorPage做成

找到Community的Error Page,如下：

在Community的Error page页面，拖一个Visualforce Page

选择上边做成的VisualPage【accessErrorPage】

3.下边进行跳转测试(正常系)

dreamHouseOpportunityEditForm2.html

代码语言：javascript复制
<template>
  <lightning-card>
    <lightning-record-form record-id={recordId} object-api-name={objectApiName} mode="view">
    </lightning-record-form>
    <lightning-layout multiple-rows="true">
        <lightning-layout-item  padding="around-small" flexibility='auto' size='6'>
            <lightning-input name="name" value={EditForm.name} label="Opportunity Name" class="opportunityName" onchange={handleChange}></lightning-input>
        </lightning-layout-item>
        <lightning-layout-item  padding="around-small" flexibility='auto' size='6'>
            <lightning-input name="accountId" value={EditForm.accountId} label="Account Name" class="opportunityName" onchange={handleChange}></lightning-input>
        </lightning-layout-item>
        <lightning-layout-item padding="horizontal-small" flexibility='auto' size='6'>
            <label>Stage</label>
            <lightning-combobox name="stageName" variant="label-hidden"
                value={EditForm.stageName} options={optionsStageName}  class="opportunityName" onchange={handleChange}>
            </lightning-combobox>
        </lightning-layout-item>
        <lightning-layout-item  padding="around-small" flexibility='auto' size='6'>
            <lightning-input name="ownerId" type="text" value={EditForm.ownerId} label="Opportunity Owner"  class="opportunityName" onchange={handleChange}></lightning-input>
        </lightning-layout-item>
        <lightning-layout-item  padding="around-small" flexibility='auto' size='6'>
            <lightning-input name="isPrivate" type="checkBox" checked={EditForm.isPrivate} label="Private"  class="opportunityName" onchange={handleCheckChange}></lightning-input>
        </lightning-layout-item>
        <lightning-layout-item  padding="around-small" flexibility='auto' size='6'>
            <lightning-input name="closeDate" type="date" value={EditForm.closeDate} label="Close Date"  class="opportunityName" onchange={handleChange}></lightning-input>
        </lightning-layout-item>
        <lightning-layout-item  padding="around-small" flexibility='auto' size='6'>
          <lightning-input name="description" type="text" value={EditForm.description} label="Description"  class="opportunityName" onchange={handleChange}></lightning-input>
      </lightning-layout-item>
    </lightning-layout>
    <lightning-layout-item size="12">
        <div class="slds-m-top_medium">
            <lightning-button class="slds-m-top_small" type="submit" label="Save Record"
                onclick={handleSave}>
            </lightning-button>
        </div>
    </lightning-layout-item>
  </lightning-card>
</template>

dreamHouseOpportunityEditForm2.js

代码语言：javascript复制
import { LightningElement, api, track, wire } from 'lwc';
import { updateRecord,getRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
import OPPORTUNITY_ID_FIELD from '@salesforce/schema/Opportunity.Id';
import OPPORTUNITY_NAME_FIELD from '@salesforce/schema/Opportunity.Name';
import OPPORTUNITY_OWNERID_FIELD from '@salesforce/schema/Opportunity.OwnerId';
import OPPORTUNITY_ISPRIVATE_FIELD from '@salesforce/schema/Opportunity.IsPrivate';
import OPPORTUNITY_CLOSEDATE_FIELD from '@salesforce/schema/Opportunity.CloseDate';
import OPPORTUNITY_ACCOUNTID_FIELD from '@salesforce/schema/Opportunity.AccountId';
import OPPORTUNITY_STAGENAME_FIELD from '@salesforce/schema/Opportunity.StageName';
import OPPORTUNITY_DESCRIPTION_FIELD from '@salesforce/schema/Opportunity.Description';
const infoFields = [
    OPPORTUNITY_ID_FIELD,
    OPPORTUNITY_NAME_FIELD,
    OPPORTUNITY_OWNERID_FIELD,
    OPPORTUNITY_ISPRIVATE_FIELD,
    OPPORTUNITY_CLOSEDATE_FIELD,
    OPPORTUNITY_ACCOUNTID_FIELD,
    OPPORTUNITY_STAGENAME_FIELD,
    OPPORTUNITY_DESCRIPTION_FIELD
];
export default class DreamHouseOpportunityEditForm2 extends NavigationMixin(LightningElement) {
    @api recordId;
    @api objectApiName;
    @track opportunityRecord
    @track EditForm = {
        name:'',
        ownerId:'',
        isPrivate:'',
        closeDate:'',
        accountId:'',
        stageName:'',
        description:''
    }
    @track optionsStageName = [];
    async connectedCallback() {
        let optionsStageNameTempValues = [];
        optionsStageNameTempValues.push({ label: '-', value: '' });
        optionsStageNameTempValues.push({ label: '未割当', value: '未割当' });
        optionsStageNameTempValues.push({ label: '方針策定', value: '方針策定' });
        optionsStageNameTempValues.push({ label: '提案準備', value: '提案準備' });
        optionsStageNameTempValues.push({ label: '申込済・計上待ち', value: '申込済・計上待ち' });
        optionsStageNameTempValues.push({ label: '成立', value: '成立' });
        this.optionsStageName = optionsStageNameTempValues;
    }
    @wire(getRecord, { recordId: '$recordId', fields: infoFields })
    wiredOpportunity(value) {
        this.opportunityRecord = value;
        const { data, error } = value;
        if (error) {
        } else if (data && data.fields) {
            this.EditForm.name = data.fields.Name.value;
            this.EditForm.ownerId = data.fields.OwnerId.value;
            this.EditForm.isPrivate = data.fields.IsPrivate.value;
            this.EditForm.closeDate = data.fields.CloseDate.value;
            this.EditForm.accountId = data.fields.AccountId.value;
            this.EditForm.stageName = data.fields.StageName.value;
            this.EditForm.description = data.fields.Description.value;
        }
    }

    handleChange(event) {
        if(event.target.name === 'ownerId') {
            this.EditForm.ownerId = event.detail.value;
        } else if(event.target.name === 'closeDate') {
            this.EditForm.closeDate = event.detail.value;
        } else if(event.target.name === 'name') {
            this.EditForm.name = event.detail.value;
        } else if(event.target.name === 'accountId') {
            this.EditForm.accountId = event.detail.value;
        } else if(event.target.name === 'stageName') {
            this.EditForm.stageName = event.detail.value;
        } else if(event.target.name === 'description') {
          this.EditForm.description = event.detail.value;
      }
    }
    handleCheckChange(event) {
        if(event.target.name === 'isPrivate') {
            this.EditForm.isPrivate = event.detail.checked;
        }
    }
    handleSave() {
        const fields = {};
        fields[OPPORTUNITY_ID_FIELD.fieldApiName] = this.recordId;
        fields[OPPORTUNITY_NAME_FIELD.fieldApiName] = this.EditForm.name;
        fields[OPPORTUNITY_OWNERID_FIELD.fieldApiName] = this.EditForm.ownerId;
        fields[OPPORTUNITY_ISPRIVATE_FIELD.fieldApiName] = this.EditForm.isPrivate;
        fields[OPPORTUNITY_CLOSEDATE_FIELD.fieldApiName] = this.EditForm.closeDate;
        fields[OPPORTUNITY_ACCOUNTID_FIELD.fieldApiName] = this.EditForm.accountId;
        fields[OPPORTUNITY_STAGENAME_FIELD.fieldApiName] = this.EditForm.stageName;
        fields[OPPORTUNITY_DESCRIPTION_FIELD.fieldApiName] = this.EditForm.description;
        const recordInput = { fields };
        updateRecord(recordInput)
        .then(() => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Opportunity updated',
                    variant: 'success'
                })
            );
        }).catch(error => {
            //
        });
    }
}
代码语言：javascript复制
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="recordId" type="String" />
            <property name="objectApiName" type="String" default="Opportunity" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

4.下边进行跳转测试(异常系)

我们要进行更新处理，随便找到一个项目，然后把更新权限删除

通过测试User找到Profile

Description的编辑权限删除。

在方法【handleSave】的【catch】里边实现画面跳转。

代码语言：javascript复制
import { LightningElement, api, track, wire } from 'lwc';
import { updateRecord,getRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
import OPPORTUNITY_ID_FIELD from '@salesforce/schema/Opportunity.Id';
import OPPORTUNITY_NAME_FIELD from '@salesforce/schema/Opportunity.Name';
import OPPORTUNITY_OWNERID_FIELD from '@salesforce/schema/Opportunity.OwnerId';
import OPPORTUNITY_ISPRIVATE_FIELD from '@salesforce/schema/Opportunity.IsPrivate';
import OPPORTUNITY_CLOSEDATE_FIELD from '@salesforce/schema/Opportunity.CloseDate';
import OPPORTUNITY_ACCOUNTID_FIELD from '@salesforce/schema/Opportunity.AccountId';
import OPPORTUNITY_STAGENAME_FIELD from '@salesforce/schema/Opportunity.StageName';
import OPPORTUNITY_DESCRIPTION_FIELD from '@salesforce/schema/Opportunity.Description';
import isEnvironment from '@salesforce/apex/getNetWorkController.isEnvironment';
const infoFields = [
    OPPORTUNITY_ID_FIELD,
    OPPORTUNITY_NAME_FIELD,
    OPPORTUNITY_OWNERID_FIELD,
    OPPORTUNITY_ISPRIVATE_FIELD,
    OPPORTUNITY_CLOSEDATE_FIELD,
    OPPORTUNITY_ACCOUNTID_FIELD,
    OPPORTUNITY_STAGENAME_FIELD,
    OPPORTUNITY_DESCRIPTION_FIELD
];
export default class DreamHouseOpportunityEditForm2 extends NavigationMixin(LightningElement) {
    @api recordId;
    @api objectApiName;
    @track opportunityRecord
    @track EditForm = {
        name:'',
        ownerId:'',
        isPrivate:'',
        closeDate:'',
        accountId:'',
        stageName:'',
        description:''
    }
    @track optionsStageName = [];
    async connectedCallback() {
        let optionsStageNameTempValues = [];
        optionsStageNameTempValues.push({ label: '-', value: '' });
        optionsStageNameTempValues.push({ label: '未割当', value: '未割当' });
        optionsStageNameTempValues.push({ label: '方針策定', value: '方針策定' });
        optionsStageNameTempValues.push({ label: '提案準備', value: '提案準備' });
        optionsStageNameTempValues.push({ label: '申込済・計上待ち', value: '申込済・計上待ち' });
        optionsStageNameTempValues.push({ label: '成立', value: '成立' });
        this.optionsStageName = optionsStageNameTempValues;
    }
    @wire(getRecord, { recordId: '$recordId', fields: infoFields })
    wiredOpportunity(value) {
        this.opportunityRecord = value;
        const { data, error } = value;
        if (error) {
        } else if (data && data.fields) {
            this.EditForm.name = data.fields.Name.value;
            this.EditForm.ownerId = data.fields.OwnerId.value;
            this.EditForm.isPrivate = data.fields.IsPrivate.value;
            this.EditForm.closeDate = data.fields.CloseDate.value;
            this.EditForm.accountId = data.fields.AccountId.value;
            this.EditForm.stageName = data.fields.StageName.value;
            this.EditForm.description = data.fields.Description.value;
        }
    }

    handleChange(event) {
        if(event.target.name === 'ownerId') {
            this.EditForm.ownerId = event.detail.value;
        } else if(event.target.name === 'closeDate') {
            this.EditForm.closeDate = event.detail.value;
        } else if(event.target.name === 'name') {
            this.EditForm.name = event.detail.value;
        } else if(event.target.name === 'accountId') {
            this.EditForm.accountId = event.detail.value;
        } else if(event.target.name === 'stageName') {
            this.EditForm.stageName = event.detail.value;
        } else if(event.target.name === 'description') {
          this.EditForm.description = event.detail.value;
      }
    }
    handleCheckChange(event) {
        if(event.target.name === 'isPrivate') {
            this.EditForm.isPrivate = event.detail.checked;
        }
    }
    handleSave() {
        const fields = {};
        fields[OPPORTUNITY_ID_FIELD.fieldApiName] = this.recordId;
        fields[OPPORTUNITY_NAME_FIELD.fieldApiName] = this.EditForm.name;
        fields[OPPORTUNITY_OWNERID_FIELD.fieldApiName] = this.EditForm.ownerId;
        fields[OPPORTUNITY_ISPRIVATE_FIELD.fieldApiName] = this.EditForm.isPrivate;
        fields[OPPORTUNITY_CLOSEDATE_FIELD.fieldApiName] = this.EditForm.closeDate;
        fields[OPPORTUNITY_ACCOUNTID_FIELD.fieldApiName] = this.EditForm.accountId;
        fields[OPPORTUNITY_STAGENAME_FIELD.fieldApiName] = this.EditForm.stageName;
        fields[OPPORTUNITY_DESCRIPTION_FIELD.fieldApiName] = this.EditForm.description;
        const recordInput = { fields };
        updateRecord(recordInput)
        .then(() => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Opportunity updated',
                    variant: 'success'
                })
            );
        }).catch(error => {
            console.log('error>>>>>>>>>>>>>>>>::::' JSON.stringify(error));
            let errorBody;
            if (Array.isArray(error.body)) {
                errorBody = error.body[0];
            } else {
                errorBody = error.body;
            }
            console.log('errorBody.message>>>>>>>>>>>>>>>>::::' JSON.stringify(errorBody.message));
            isEnvironment()
            .then(result => {
                console.log('result>>>>>>>>>>>>>>>>::::' JSON.stringify(result));
                if(result && result === 'lightning') {
                    maincomInstance[NavigationMixin.Navigate]({
                        type: 'standard__component',
                        attributes: {
                            //componentName : 'c__CommonErrorPageAura',
                            componentName : '',
                        },
                        state : {
                            c__errorMessage : errorBody.message
                        }
                    });
                } else if (result && result === 'community') {
                    window.location.href = '/UrsaMajor/s/error?errorMessage='   errorBody.message;
                }
            })
            .catch(error =>{
                console.log(JSON.stringify(error));
            });
        });
    }
}
代码语言：javascript复制
public with sharing class getNetWorkController {
    @AuraEnabled(cacheable=true)
    public static string isEnvironment(){
        String environment = 'community';
        system.debug('environment>>>>>>>111>>>>' environment);
        String networkId = Network.getNetworkId();
        if(String.isBlank(networkId)) {
            environment = 'lightning';
        }
        system.debug('environment>>>>>>>222>>>>' environment);
        return environment;
    }
}

效果展示：

更新项目【Description】，点击按钮【Save Record】

跳转到配置好的error页面

unity 腾讯云测试服务

0 人点赞