カテゴリー: Salesforce

SLDS

Salesforce Lightning Design System

Salesforce社が提供しているCSSフレームワーク

SLDSを利用することで、１からCSSを記述せずに Lightning Experience のデザインを踏襲した画面開発ができます。

よく使うSLDS

Box

例

<div class="slds-box">
  <p>hello world.</p>
</div>

Grid

例
<div class="slds-grid slds-gutters">
    <div class="slds-col">
        <lightning-input type="text" label="テキスト(1)" ></lightning-input>
    </div>
    <div class="slds-col">
        <lightning-input type="text" label="テキスト(2)" ></lightning-input>
    </div>
    <div class="slds-col">
        <lightning-input type="text" label="テキスト(3)" ></lightning-input>
    </div>
</div>

Modals

例
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open">
    <div class="slds-modal__container"> <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
            <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
            </svg>
            <span class="slds-assistive-text">hello world</span>
          </button>
        <div class="slds-modal__header">
            <h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate">hello world</h1>
        </div>
        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            <p>hello world.</p>
        </div>
        <div class="slds-modal__footer"> <button class="slds-button slds-button_neutral" aria-label="Cancel and close">Cancel</button> <button class="slds-button slds-button_brand">Save</button> </div>
    </div>
</section>
<div class="slds-backdrop slds-backdrop_open" role="presentation"></div>

Lightning Web Component間の通信方法

・publicプロパティ、publicメソッド

親コンポーネントから子コンポーネントへ値を渡す方法になります。

親コンポーネントから@apiデコレーターを使用して、子コンポーネントへ値を直接渡します。

publicParent.html

<template>
        <lightning-card title="Parent">
                <div class="slds-grid">
                        <div class="slds-p-around_medium">
                                <lightning-combobox 
                                        name="value" 
                                        label="value" 
                                        value={value} 
                                        options={options} 
                                        onchange={handleChange} 
                                        variant="label-hidden">
                                </lightning-combobox>
                        </div>
                        <div class="slds-p-around_medium">
                                <c-public-child value={value}></c-public-child>
                        </div>
                </div>
        </lightning-card>
</template>

publicParent.js

import { LightningElement } from 'lwc';

export default class PublicParent extends LightningElement {
        value = '';

        get options() {
                return [
                        { label: '', value: '' },
                        { label: 'A', value: 'A' },
                        { label: 'B', value: 'B' },
                        { label: 'C', value: 'C' }
                ];
        }

        handleChange(event) {
                this.value = event.detail.value;
        }
}

pulicChild.html

<template>
        <!-- Parentから渡された値を表示する -->
        <div>
                <span>通信値 {value}</span>
        </div>
</template>

publicChild.js

import { LightningElement, api } from 'lwc';

export default class PublicChild extends LightningElement {
        // publicプロパティは@apiデコレーターを使用して宣言します。
        // @apiをつけることで親コンポーネントからアクセス可能になります。
        @api value;
}

superキーワードは、親クラスのコンストラクタおよびメソッドを上書きできます。

例えば、次のクラスがあるとします。

public virtual class SuperClass {
    public String mySalutation;
    public String myFirstName;
    public String myLastName;

    public SuperClass() {

        mySalutation = 'Mr.';
        myFirstName = 'Carl';
        myLastName = 'Vonderburg';
    }

    public SuperClass(String salutation, String firstName, String lastName) {

        mySalutation = salutation;
        myFirstName = firstName;
        myLastName = lastName;
    }

    public virtual void printName() {

        System.debug('My name is ' + mySalutation + myLastName);
    }

   public virtual String getFirstName() {
       return myFirstName;
   }
}

Superクラスを拡張して、サブクラスで使います。

public class Subclass extends Superclass {
  public override void printName() {
        super.printName();
        System.debug('But you can call me ' + super.getFirstName());
    }
}

Subclass.printName をコールした場合に期待される出力は、「My name is Mr. Vonderburg. But you can call me Carl」です。

switch構文は次のとおりです。

switch on expression {
    when value1 {		// when block 1
        // code block 1
    }	
    when value2 {		// when block 2
        // code block 2
    }
    when value3 {		// when block 3
        // code block 3
    }
    when else {		  // default block, optional
        // code block 4
    }
}

switch on i {
   when 2 {
       System.debug('when block 2');
   }
   when -3 {
       System.debug('when block -3');
   }
   when else {
       System.debug('default');
   }
}

switch on i {
   when 2, 3, 4 {
       System.debug('when block 2 and 3 and 4');
   }
   when 5, 6 {
       System.debug('when block 5 and 6');
   }
   when 7 {
       System.debug('when block 7');
   }
   when else {
       System.debug('default');
   }
}

switch on someInteger(i) {
   when 2 {
       System.debug('when block 2');
   }
   when 3 {
       System.debug('when block 3');
   }
   when else {
       System.debug('default');
   }
}

Salesforceのディスク容量の計算

組織のエディションとユーザライセンスの数によってディスク容量は決まります。

計算式は「組織のエディションによって決まる固定ストレージ」＋「ユーザライセンス数にして比例して追加されるストレージ」です。

データストレージはオブジェクトのレコードを格納する容量です。

Salesforceでは一部のオブジェクトを除いて1レコード2KBです。

データストレージの容量と組織で使用を想定しているレコード数が分かれば、容量が十分かどうかを確認することができます。

ファイルストレージは関連ファイルなどにアップロードするファイルを格納する容量です。

ファイルストレージ容量と組織で扱うファイル数・サイズが分かれば、容量が十分かどうかを確認することができます。

Lightning Web ComponentでApex呼び出し方法

■LWCから呼び出せるApexメソッド

条件

　　@AuraEnabledがついていること

　　staticであること

　　publicもしくはglobalであること

例）

Apexクラス作成します。

testController

public with sharing class testController {
    @AuraEnabled
    public static List<test__c> getRecord( String str ){
        return [
                SELECT
                 Id,
                 Name
                FROM test__c
                Where Name = str
            ];
    }
}

■LWCからApex呼び出し

・Javascript

testLwc.js

import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { CurrentPageReference } from "lightning/navigation";
import getRecord from '@salesforce/apex/testController.getRecord';

export default class testLwc extends LightningElement {

　@api recordId;

  @wire(CurrentPageReference)
  async getStateParameters(currentPageReference) {
    //ScreenActionの場合、レコード詳細画面でLightning Web コンポーネントアクション押下時のレコードID取得
    this.recordId = currentPageReference.state.recordId;
    //Apexクラスメソッド呼び出して、レコード取得
    const rows = await getRecords({ recordId: this.recordId }).catch((e) => {
      console.error(e);
　　　//dispatchEventメソッドでカスタムイベントをディスパッチし、親コンポーネントに伝達します。
      this.dispatchEvent(
        new ShowToastEvent({
          title: "エラーが発生しました。",
          message: e.body.message,
          variant: "error",
        })
      );
    });
  }

}

・xml

testLwc.js-meta.xml

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

・html

testLwc.html

<template>
        <lightning-quick-action-panel header="test">
            ここにモーダルコンテンツを記載する
            <div slot="footer">
                <lightning-button variant="neutral" label="ボタン1" class="slds-m-left_x-small"></lightning-button>
                <lightning-button variant="brand" label="ボタン2" class="slds-m-left_x-small"></lightning-button>
            </div>
        </lightning-quick-action-panel>
</template>

Salesforce CLI(Command Line Interface)使用の流れ

・Install

https://developer.salesforce.com/ja/tools/sfdxcli

コマンドプロンプトにて、以下のコマンドを実行します。

・sfdx update

Salesforce CLI とプラグインの最新バージョンをインストールするには、次のコマンドを実行します。

・sfdx –version

現在のバージョンを確認します

・sfdx force:auth:web:login -d -a {エイリアス名}

例)sfdx force:auth:web:login -d -a devtest

ここで、「devtest」はエイリアス名

対象組織にログインします

・プロジェクト作成

例）C:\hoge>sfdx force:project:create -n hoge-project

hogeディレクトリ直下に「hoge-project」プロジェクトを作成します。

・対象組織にログインします。

例）C:\hoge>sfdx force:org:open -u test@testtesttestkkkk.com

ここで、ユーザ名「test@testtesttestkkkk.com」の場合

・プロジェクト「hoge-project」にApexクラス取得します。

例）C:\hoge\hoge-project>sfdx force:source:retrieve -m ApexClass -u devtest

ここで、「devtest」はエイリアス名

・パス指定して、取得します。

例）C:\hoge\hoge-project>sfdx force:source:retrieve -p force-app/main/default/classes -u devtest

ここで、「devtest」はエイリアス名

テストクラスカバー率確認方法

select id, ApexClassorTrigger.Name, NumLinesCovered, NumLinesUncovered from ApexCodeCoverageAggregate

Use Tooling API をON にしておく必要があります。

エラー：Only variable references are allowed in dynamic SOQL/SOSL

・エラーが起きるケース

        List<String> accountIdList = new List<String>();
        for(Account account : accountList){
            accountIdList.add(account.Id);
        }

        String query = '';
        query = '';
        query += ' SELECT Id '; 
        query += ' , Name ';
        query += ' , Account__c ';
        query += ' , Account__r.Id ';
        query += ' From Test__c ';
        query += ' WHERE Account__r.Id IN : \'' + accountIdList + '\'';
        system.debug('query:'+query);

        List<Test__c> testLsit = Database.query(query);

・エラーが起きないケース

        List<String> accountIdList = new List<String>();
        for(Account account : accountList){
            accountIdList.add(account.Id);
        }

        String query = '';
        query = '';
        query += ' SELECT Id '; 
        query += ' , Name ';
        query += ' , Account__c ';
        query += ' , Account__r.Id ';
        query += ' From Test__c ';
        query += ' WHERE Account__r.Id IN : accountIdList ';
        system.debug('query:'+query);

        List<Test__c> testLsit = Database.query(query);

Apexテストクラスのエラー「TestMethod として定義されたメソッドは、getContent コールをサポートしていません。」対応

attachmentFile.Body = Test.isRunningTest() ? Blob.valueof('testString') : pr.getContent();