カテゴリー: Salesforce

(Lightning Web Component) for each

HTML


<template>
    <lightning-card>
        <lightning-accordion active-section-name={activeSections} allow-multiple-sections-open >
            <lightning-accordion-section label="普通文字" name="1">
                <lightning-layout multiple-rows>
                    <template for:each={fontList} for:item="item" for:index="index">
                        <lightning-layout-item size="6" key={item} class={item.class} >
                            {index} - {item.label}
                        </lightning-layout-item>
                    </template>
                </lightning-layout>
            </lightning-accordion-section>

            <lightning-accordion-section label="太文字" name="2">
                <lightning-layout multiple-rows>
                    <lightning-layout-item size="6">
                        太文字1列目
                    </lightning-layout-item>
                    <lightning-layout-item size="6">
                        太文字２列目
                    </lightning-layout-item>
                </lightning-layout>
            </lightning-accordion-section>

            <lightning-accordion-section label="テーブル" name="3">
                <lightning-layout multiple-rows>
                    <lightning-layout-item size="6">
                        テーブル1列目
                    </lightning-layout-item>
                    <lightning-layout-item size="6">
                        テーブル２列目
                    </lightning-layout-item>
                </lightning-layout>
            </lightning-accordion-section>

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

JS


import { LightningElement } from 'lwc';

export default class FontSample extends LightningElement {

    activeSections = ['1', '2', '3'];

    fontList = [
        {
            label: 'フォント9',
            class: 'size_9',
        },
        {
            label: 'フォント10',
            class: 'size_10',
        },
    ];    
}

CSS

.size_9 {
    font-size: 9px !important;
}
.size_10 {
    font-size: 10px !important;
}

結果

lightning-layout

lightning-layout で、multiple-rows=”true” とする

複数列での表示が可能になります。

lightning-layout-item で、size=”6″ とする

size では、画面幅を12分割したうちのいくつ分の幅にするかを指定します。今回は２列表示なので、”6″ にします。３列表示なら “4” 、４列表示なら “3” にすします。

HTML

<template>
    <lightning-card>
        <lightning-accordion active-section-name={activeSections} allow-multiple-sections-open >
            <lightning-accordion-section label="普通文字" name="1">
                <lightning-layout multiple-rows>
                    <lightning-layout-item size="6">
                        普通文字1列目
                    </lightning-layout-item>
                    <lightning-layout-item size="6">
                        普通文字２列目
                    </lightning-layout-item>
                </lightning-layout>
            </lightning-accordion-section>

            <lightning-accordion-section label="太文字" name="2">
                <lightning-layout multiple-rows>
                    <lightning-layout-item size="6">
                        太文字1列目
                    </lightning-layout-item>
                    <lightning-layout-item size="6">
                        太文字２列目
                    </lightning-layout-item>
                </lightning-layout>
            </lightning-accordion-section>

            <lightning-accordion-section label="テーブル" name="3">
                <lightning-layout multiple-rows>
                    <lightning-layout-item size="6">
                        テーブル1列目
                    </lightning-layout-item>
                    <lightning-layout-item size="6">
                        テーブル２列目
                    </lightning-layout-item>
                </lightning-layout>
            </lightning-accordion-section>

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

JS

import { LightningElement } from 'lwc';

export default class FontSample extends LightningElement {

    activeSections = ['1', '2', '3'];

    
}

結果

active-section-name

最初から複数のセクションを開いておくには active-section-name に配列を渡します。 

<lightning-accordion active-section-name={open}
                     allow-multiple-sections-open>
    <lightning-accordion-section name="1st">first</lightning-accordion-section>
    <lightning-accordion-section name="2nd">second</lightning-accordion-section>
    <lightning-accordion-section name="3rd">third</lightning-accordion-section>
</lightning-accordion>

import { LightningElement } from 'lwc';

export default class Accordion extends LightningElement {
  open = ['1st', '2nd'];
}

active-section-name

<template>
    <lightning-card>
        <lightning-accordion active-section-name="B">
            <lightning-accordion-section name="A" label="Accordion Title A"
                >This is the content area for section A</lightning-accordion-section
            >
            <lightning-accordion-section name="B" label="Accordion Title B"
                >This is the content area for section B</lightning-accordion-section
            >
            <lightning-accordion-section name="C" label="Accordion Title C"
                >This is the content area for section C</lightning-accordion-section
            >
        </lightning-accordion>
    </lightning-card>
</template>

lightning-accordion

An accordion allows a user to toggle the display of a section of content.

<template>
    <lightning-card>
        <lightning-accordion>
            <lightning-accordion-section>Accordion details - A</lightning-accordion-section>
            <lightning-accordion-section>Accordion details - B</lightning-accordion-section>
            <lightning-accordion-section>Accordion details - B</lightning-accordion-section>            
        </lightning-accordion>
    </lightning-card>
</template>

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>