見積状況バー

開始者 Community Manager ‎10-04-2017 07:52 AM

質問

Salesforce の商談にある見積状況バーのような状況バーを作成する方法は?  

回答

この記事に、作成に必要な画像が添付されています。  

 

  1. 3 つの画像をドキュメントにアップロードし、外部参照可能にします。 
  2. 見積状況バーの VF コンポーネントを作成します。 URL が画像を参照するように URL を変更します。  
    <apex:component >
    <apex:attribute name="status" type="string" required="true" description="What stage is the quote"/>
    <apex:outputPanel rendered="{!status == 'Draft'}">
    <table style="width:100%;">
        <tr style="width:100%;">
            <td align="middle" style="width:100%;">
                <img style="height: 75%;" src="/draft.png" alt="Draft" />
            </td>
        </tr>
    </table>
    </apex:outputPanel>
    <apex:outputPanel rendered="{!status == 'In Review'}">
    <table style="width:100%;">
        <tr style="width:100%;">
            <td align="middle" style="width:100%;">
                <img style="height: 75%;" src="inReview.png" alt="In Review" />
            </td>
        </tr>
    </table>
    </apex:outputPanel>
    <apex:outputPanel rendered="{!status == 'Approved'}">
    <table style="width:100%;">
        <tr style="width:100%;">
            <td align="middle" style="width:100%;">
                <img style="height: 75%;" src="/approved.png" alt="Approved" />
            </td>
        </tr>
    </table>
    </apex:outputPanel>
    </apex:component>
  3. 見積状況バーの VF ページを作成します。  
    <apex:page standardController="SBQQ__Quote__c">
    <p></p>
    <c:Status_Bar status="{!SBQQ__Quote__c.SBQQ__Status__c}" ></c:Status_Bar>
    </apex:page>
  4. 見積状況バーの VF ページを見積ページレイアウトの新規セクションに追加します。  

Lightning ビュー

LightningView.png

 

 

 

 

Aloha ビュー

AlohaView.png