SalesforceでLWCを使用して星評価コンポーネントを構築する方法

公開: 2020-06-24

このブログでは、LWCを使用して評価コンポーネントを構築する方法を学習します。イベントの開催、製品の発売、食品の配達の実行など、顧客からのフィードバックが最も重要であるかどうかにかかわらず、さまざまな側面で評価コンポーネントが必要です。

それがどのように見えるか。

LWCを使用したコンポーネントの評価
コーディングを始めましょう。 2つのコンポーネントを構築します。

ratingCmp.html

 <テンプレート>
    <div class = "rate">
        <input type = "radio" name = {name} value = "5" onchange = {rating} />
        <label for = "star15" title = "text"> 5つ星</ label>
        <input type = "radio" name = {name} value = "4" onchange = {rating} />
        <label for = "star14" title = "text"> 4つ星</ label>
        <input type = "radio" name = {name} value = "3" onchange = {rating} />
        <label for = "star13" title = "text"> 3つ星</ label>
        <input type = "radio" name = {name} value = "2" onchange = {rating} />
        <label for = "star12" title = "text"> 2つ星</ label>
        <input type = "radio" name = {name} value = "1" onchange = {rating} />
        <label for = "star11" title = "text"> 1つ星</ label>
    </ div>
</ template>

ratingCmp.js

 import {LightningElement、api} from "lwc";

デフォルトクラスのエクスポートRatingCmpはLightningElementを拡張します{
  静的ピザ;
  静的配信;
  静的なハンバーガー;
  静的パッケージ化;
  @api名;
  レーティング（イベント）{
    if（event.target.name === "Pizza"）{        
      RatingCmp.pizzarating = event.target.value;        
    }
    if（event.target.name === "Burger"）{
      RatingCmp.burgerrating = event.target.value;
    }
    if（event.target.name === "Package"）{
      RatingCmp.packagerating = event.target.value; 
    }
    if（event.target.name === "Delivery"）{
      RatingCmp.deliveryrating = event.target.value;
    }
  }
@api
  getvalues（）{
    alert（
      "DeliveryRating：" +
      RatingCmp.deliveryrating +
        "、PizzaRating：" +
        RatingCmp.pizzarating +
        "、BurgerRating：" +
        RatingCmp.burgerrating +
        "、PackageRating：" +
        RatingCmp.packagerating
    ）;
  }
}

RatingCmp.css

 * {
    マージン：0;
    パディング：0;
}

。割合 {
    フロート：左;
    高さ：46px;
    パディング：0 10px;
}

.rate：not（：checked）> input {
    位置：絶対;
    上：-9999px;
}

.rate：not（：checked）> label {
    フロート：右;
    幅：1em;
    オーバーフロー：非表示;
    空白：nowrap;
    カーソル：ポインタ;
    フォントサイズ：30px;
    色：#ccc;
}

.rate：not（：checked）> label：before {
    コンテンツ： '★';
}

.rate> input：checked〜label {
    色：＃ffc700;
}

.rate：not（：checked）> label：hover、
.rate：not（：checked）> label：hover〜label {
    色：＃deb217;
}

.rate> input：checked + label：hover、
.rate> input：checked + label：hover〜label、
.rate> input：checked〜label：hover、
.rate> input：checked〜label：hover〜label、
.rate> label：hover〜input：checked〜label {
    色：＃c59b08;
}

FeedbackCmp.html

 <テンプレート>
    <lightning-tile title = 'フィードバックを提供する'>
        <div class = "slds-m-top_medium slds-m-bottom_x-large">
            <div class = "slds-p-around_medium lgc-bg">
                <lightning-tile label = "Delivery Service" type = "media">
                    <lightning-avatar slot = "media"
                        src = "https://tse1.mm.bing.net/th?id=OIP.DrJx7TuzS4K3-AWQGM0-pwHaE5&pid=Api&P=0&w=50&h=100"
                        fallback-icon-name = "standard：person_account" Alternative-text = "Delivery Service"> </ lightning-avatar>
                        <c-rating-cmp name = '配信'> </ c-rating-cmp>
                </ lightning-tile>    
            </ div>
        </ div>
        <div class = "slds-m-top_medium slds-m-bottom_x-large">
            <div class = "slds-p-around_medium lgc-bg">
                <lightning-tile label = "Pizza" type = "media">
                    <lightning-avatar slot = "media"
                        src = "https://res.cloudinary.com/teepublic/image/private/s--vVWQvPyW--/ar_1:1,c_fill,h_300,w_300/d_misc:avatars:f_5.png,f_jpg,q_90/v1476802496/プロダクション/ストア/4367/avatar.jpg」
                        fallback-icon-name = "standard：person_account" Alternative-text = "Pizza"> </ lightning-avatar>
                        <c-rating-cmp name = 'Pizza'> </ c-rating-cmp>
                </ lightning-tile>
            </ div>
        </ div>
        <div class = "slds-m-top_medium slds-m-bottom_x-large">
            <div class = "slds-p-around_medium lgc-bg">
                <lightning-tile label = "Burger" type = "media">
                    <lightning-avatar slot = "media" src = "https://webstockreview.net/images/burger-clipart-bread-12.jpg"
                        fallback-icon-name = "standard：person_account" Alternative-text = "Burger"> </ lightning-avatar>
                        <c-rating-cmp name = 'Burger'> </ c-rating-cmp>
                </ lightning-tile>    
            </ div>
        </ div>
        <div class = "slds-m-top_medium slds-m-bottom_x-large">
    
            <div class = "slds-p-around_medium lgc-bg">
                <lightning-tile label = "Packaging" type = "media">
                    <lightning-avatar slot = "media"
                        src = "https://us.123rf.com/450wm/theblackrhino/theblackrhino1410/theblackrhino141000154/33177495-stock-vector-yellow-generic-food-package-over-blue-background.jpg?ver=6"
                        fallback-icon-name = "standard：person_account" Alternative-text = "Packaging"> </ lightning-avatar>
                    <c-rating-cmp name = 'Package'> </ c-rating-cmp>
                </ lightning-tile>
                <lightning-button label = "Submit" onclick = {showRating}> </ lightning-button>
            </ div>
        </ div>
    </ lightning-tile>
</ template>

FeedbackCmp.js

 'lwc'から{LightningElement}をインポートします。

デフォルトクラスのエクスポートFeedbackCmpはLightningElementを拡張します{
    showRating（）{
        this.template.querySelector（ 'c-rating-cmp'）。getvalues（）;
    }
}

FeedbackCmp.css

 * {
    マージン：0;
    パディング：0;
}

FeedbackCmp.js-meta.xml

 <？xml version = "1.0" encoding = "UTF-8"？>
<LightningComponentBundle xmlns = "http://soap.sforce.com/2006/04/metadata">
    <apiVersion> 48.0 </ apiVersion>
    <isExposed> true </ isExposed>
    <ターゲット>
    <target> lightning__AppPage </ target>
    <target> lightning__RecordPage </ target>
    <target> lightning__HomePage </ target>
</ターゲット>
</ LightningComponentBundle>

コードの説明

これでは、スタービューを構築するためのratingCmpコンポーネントを作成し、この子コンポーネントをフィードバックコンポーネントに使用しました。
```
 <c-rating-cmp name = 'Package'> </ c-rating-cmp>
```
名前のパブリック変数を宣言し、すべてのオプションにfeedbackCmpから値を渡しました。
このようにして、コードを何度も変更する必要がない場合に、評価コンポーネントを編集できます。再利用可能なコードを書く方法。
xmlファイルで、ターゲット値をアプリページ、レコードページ、またはホームページとして追加します。コミュニティページもご利用いただけます。

showRatingを送信すると、子コンポーネントのパブリックメソッドが呼び出されます。

 this.template.querySelector（ 'c-rating-cmp'）。getvalues（）

この投稿が、LWCを使用して星評価コンポーネントを構築するのに役立つことを願っています。私たちEmizentechには、世界中の企業や組織がセールスフォース製品の助けを借りてビジネス目標を達成するのを支援する専門のセールスフォース開発者がいます。だから、私たちと連絡を取り、最高のセールスフォースコンサルティング会社を雇ってください。