カテゴリー: Salesforce

lightning-card

cardとは

コンテナです。 タイトル、アクション、フッタを持たせることができます。

例）

<template>
    <lightning-card>lightning-card</lightning-card>
</template>

Lightning アプリケーションビルダー

＞　新規

＞　アプリケーション

＞　表示ラベル：Lightning

＞　１つの画面

カスタムの一覧から、fontSampleを追加

保存

有効化

保存

完了

戻る

アプリケーションランチャー

＞　Lightning

<template>
        <lightning-card  title="Hello">
            <lightning-button label="New" slot="actions"></lightning-button>
            <p class="slds-p-horizontal_small">Card Body (custom component)</p>
            <p slot="footer">Card Footer</p>
        </lightning-card>
</template>

System.DmlException: Insert failed. First exception on row 0; first error: MIXED_DML_OPERATION, 非設定オブジェクトを更新した後の設定オブジェクト上の DML 操作 (またはその逆) は、許可されていません: Account、元のオブジェクト: User: [][Salesforce]

対策案

・対応前

@isTest
private class TestRunAs {
   public static testMethod void testRunAs() {
        // Setup test data
        // Create a unique UserName
        String uniqueUserName = 'standarduser' + DateTime.now().getTime() + '@testorg.com';
        // This code runs as the system user
        Profile p = [SELECT Id FROM Profile WHERE Name='Standard User'];
        User u = new User(Alias = 'standt', Email='standarduser@testorg.com',
        EmailEncodingKey='UTF-8', LastName='Testing', LanguageLocaleKey='en_US',
        LocaleSidKey='en_US', ProfileId = p.Id,
        TimeZoneSidKey='America/Los_Angeles',
         UserName=uniqueUserName);

        System.runAs(u) {
              // The following code runs as user 'u'
              System.debug('Current User: ' + UserInfo.getUserName());
              System.debug('Current Profile: ' + UserInfo.getProfileId());
          }
    }
}

対応後

@isTest
private class TestRunAs2 {

   public static testMethod void test2() {

      Profile p = [SELECT Id FROM Profile WHERE Name='Standard User'];
      User u2 = new User(Alias = 'newUser', Email='newuser@testorg.com',
         EmailEncodingKey='UTF-8', LastName='Testing', LanguageLocaleKey='en_US',
         LocaleSidKey='en_US', ProfileId = p.Id,
         TimeZoneSidKey='America/Los_Angeles', UserName='newuser@testorg.com');

      System.runAs(u2) {
         // The following code runs as user u2.
         System.debug('Current User: ' + UserInfo.getUserName());
         System.debug('Current Profile: ' + UserInfo.getProfileId());

         // The following code runs as user u3.
         User u3 = [SELECT Id FROM User WHERE UserName='newuser@testorg.com'];
         System.runAs(u3) {
            System.debug('Current User: ' + UserInfo.getUserName());
            System.debug('Current Profile: ' + UserInfo.getProfileId());
         }

         // Any additional code here would run as user u2.
      }
   }
}

lightning-combobox

<template>
    <lightning-combobox
            name="progress"
            label="Status"
            value={value}
            placeholder="Select Progress"
            options={options}
            onchange={handleChange} ></lightning-combobox>

    <p>Selected value is: {value}</p>
</template>

import { LightningElement } from 'lwc';

export default class ComboboxBasic extends LightningElement {
    value = 'inProgress';

    get options() {
        return [
            { label: 'New', value: 'new' },
            { label: 'In Progress', value: 'inProgress' },
            { label: 'Finished', value: 'finished' },
        ];
    }

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

slds-p-around_medium

<div class="slds-p-around_medium"></div>

slds-grid

<div class="slds-grid slds-gutters">
<div class="slds-col">
<span>1</span>
</div>
<div class="slds-col">
<span>2</span>
</div>
<div class="slds-col">
<span>3</span>
</div>
</div>

Lightningコンポーネントライブラリの lightning-card

cardとは？

コンテナです。 タイトル、アクション、フッタを持たせることができます

例）

<template>
    <lightning-card>カードです</lightning-card>
</template>

Lightning Web Component Basic

Javascript

import { LightningElement } from 'lwc';

export default class App extends LightningElement {
   name = 'Electra X4';
   description = 'A sweet bike built for comfort.';
   category = 'Mountain';
   material = 'Steel';
   price = '$2,700';
   pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
   ready = false;

   connectedCallback() {
       setTimeout(() => {
           this.ready = true;
       }, 3000);
   }
}

Html

<template>
    <div>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <div>Category: {category}</div>
        <div>Material: {material}</div>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <!-- The apiVersion may need to be increased for the current release -->
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Result

Long running operation did not complete, continued in background

I am debugging a apex trigger/class and is using the Developer Console. When I click on my log entry it seems like it loads the logs and then I get this popup:

You need to manually download the logs. Go to ‘File’ then ‘Download Log’.

Lightning Webコンポーネントの非デコレータ

// howToUseVariables.js
import { LightningElement } from 'lwc';

export default class HowToUseVariables extends LightningElement {
    name = 'プレーン太郎';
}

// howToUseVariables.html
<template>
    <lightning-card class="slds-m-around_small">
        (そのまま記述)
        <p>name : {name}</p>
    </lightning-card>   
</template>

//howToUseVariables.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

動作確認

Lightning Webコンポーネントのデコレータ

Lightning Web コンポーネントデコレーターの例として、次のようなものがあります。

@api

項目を公開としてマークします。

@track

オブジェクトのプロパティまたは配列の要素の変更を監視するようにフレームワークに指示します。

@wire

Salesforce からデータを簡単に取得してバインドできるようにします。

<!-- app.html -->
<template>
<div>
    <c-bike bike={bike}></c-bike>
</div>
</template>

// app.js
import { LightningElement } from 'lwc';
export default class App extends LightningElement {
    bike = {
        name: 'Electra X4',
        picture: 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg'
    };
}

<!-- bike.html -->
<template>
    <img src={bike.picture} alt="bike picture" />
    <p>{bike.name}</p>
</template>

// bike.js
import { LightningElement, api } from 'lwc';
export default class Bike extends LightningElement {
    @api bike;
}