Salesforce 실습해보기 1(Lightning Component/Aura)

-주제: 목표 관리 시스템

-목표: Visualforce, Apex class, Lightening Component를 실습해보기

-레코드 페이지 및 앱 페이지를 개발로 커스터마이즈

-Developer Edition org 하나 받아서 실습 진행

-표준 연습을 위해 slds 사용

 

*코드는 아래 주소에 올려두었습니다

https://github.com/gagle1231/MyApp.git

 

 

 

주요 Object: Subject__c , Task__c, Todo__c

Subject: 큰 목표 ex) 토익 950점 달성

Task: 세부 목표 ex) 900+ 인강 완강

To do: 세부적으로 할 일 ex) 1차시 강의 다 듣기, 1차시 과제 하고 단어 복습

 

 

---

Subject Record Page

아래 화면은 3개의 Lightning Component(Aura Component)로 구현

 

▶Detail 부분: Subject의 필드들을 표시하고 해당 Subject를 완료했을 시(버튼을 누르면) 완료됨으로 표시

Component 명: Subject Detail.cmp

<aura:component controller="SubjectController" description="SubjectDetail" implements="force:hasRecordId,force:lightningQuickActionWithoutHeader,flexipage:availableForAllPageTypes" access="global">
    <aura:attribute type="Object" name="objSubject"/>
    <aura:handler name="init" value="{!this}" action="{!c.fnInit}"/>
    <aura:handler event="force:refreshView" action="{!c.fnInit}" />
    <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                <div class="slds-media__body">
                    <h2 class="slds-card__header-title slds-text-heading_medium">
                        <span>📝Detail</span>
                    </h2>
                </div>
                <aura:if isTrue="{!v.objSubject.isFinished__c}">
                    <span class="slds-text-color_success slds-text-heading_small">&#128539;완료됨</span>
                    <aura:set attribute="else">
                        <lightning:button class="slds-button" label="완료로 표시" onclick="{!c.fnConvertState}"/>
                    </aura:set>
                </aura:if>
            </header>
        </div>
        <div class="slds-card__body slds-card__body_inner slds-text-heading_large">
            <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Subject__c">
                <div class="slds-border_bottom">
                    <lightning:outputField fieldName="Name"/>
                </div>
                <div class="slds-border_bottom">
                    <lightning:outputField fieldName="Category__c"/>
                </div>
                <div class="slds-border_bottom">
                    <lightning:outputField fieldName="StartDate__c"/>
                </div>
                <div>
                    <lightning:outputField fieldName="EndDate__c" />
                </div>
            </lightning:recordViewForm>
        </div>
    </article>
</aura:component>

-레코드 필드들을 출력하고 싶으면 위와 같이 lightning:recordviewForm 태그 안에 lightning:outputField 태그를 사용하면 됨

<aura:if isTrue="{!v.objSubject.isFinished__c}">
    <span class="slds-text-color_success slds-text-heading_small">&#128539;완료됨</span>
    <aura:set attribute="else">
        <lightning:button class="slds-button" label="완료로 표시" onclick="{!c.fnConvertState}"/>
    </aura:set>
</aura:if>

-기존에 레코드가 완료됨 상태로 수정해도 해당 컴포넌트가 바로 안 바뀌는게 문제였는데

 

1) Controller.js에서 완료 상태 바꾸는 함수에서

$A.get('e.force:refreshView').fire(); 호출

 

2)

Component에 아래 코드를 추가하면 화면이 refresh될 때 실행할 함수를 지정할 수 있음, refresh될 때 데이터를 다시 읽어오는 방식으로 구현

<aura:handler event="force:refreshView" action="{!c.fnInit}" />

 

 

---

 

 

 

▶ 목표 달성률 부분: Task들의 완성률을 계산한 후 progress bar로 나타냄

Component 명: SubjectAcheivementRate.cmp

<aura:component  description="SubjectAchievementRate" controller="SubjectController" implements="force:hasRecordId,force:lightningQuickActionWithoutHeader,flexipage:availableForAllPageTypes" access="global">
    <aura:attribute type="Double" name="rate"/>
    <aura:handler name="init" value="{!this}" action="{!c.fnInit}"/>
    <lightning:card title="목표 달성률">
        <p class="slds-p-horizontal_medium">
        <div class="slds-grid slds-grid_align-spread slds-p-bottom_x-small" id="progress-bar-label-id-6">
            <span aria-hidden="true">
                <strong>{!v.rate}% Complete🌟</strong>
            </span>
        </div>
        <lightning:progressBar value="{!v.rate}" size="large" />
        <aura:if isTrue="{!v.rate == 100}">
            <span class="slds-text-color_success">목표 달성!</span>
        </aura:if>
        </p>
    </lightning:card>
</aura:component>

위와 같이 lightning:progressBar 태그를 사용하여 progress bar를 쉽게 나타낼 수 있음

 

 

 

---

 

▶Task List 부분: Subject에 속한 Task List(Related list)와 완료 여부, 설명 표시, 각 라인 클릭시 해당 레코드 디테일 페이지로 이동

Component 명: TaskList.cmp

<aura:component description="TaskList" controller="TaskListController" implements="force:hasRecordId,force:lightningQuickActionWithoutHeader,flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="taskList" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.getInit}"/>

    <lightning:card title="Task List" actions="">
        <aura:iteration var="task" items="{!v.taskList}">
            <article class="slds-card" title="Task List">
                <div class="slds-card__header slds-grid">
                    <header class="slds-media slds-media_center slds-has-flexi-truncate">
                        <div class="slds-media__body">
                            <h2 class="slds-card__header-title">
                                <a href="{!'/'+task.Id}" class="slds-card__header-link slds-truncate">
                                    <aura:if isTrue="{!task.isFinished__c}">
                                        <span style="text-decoration: line-through;">📌{!task.Name}</span>
                                    </aura:if>
                                    <aura:if isTrue="{!!task.isFinished__c}">
                                        <span>📌{!task.Name}</span>
                                    </aura:if>
                                </a>

                            </h2>
                        </div>
                    </header>
                </div>
                <div class="slds-card__body slds-card__body_inner">
                    {!task.Content__c}
                </div>
            </article>
        </aura:iteration>
    </lightning:card>

</aura:component>

 

text-decoration: line-through를 스타일로 지정하면 완료된 task 표시를 할 수 있음

 

---

Ligtning Component 화면 Refresh 핸들링하기

<aura:handler event="force:refreshView" action="{!c.fnInit}" />

*처음에 Subject 완료 처리하고 새로고침 처리 해도 완료됨 부분이 안 바뀌는게 문제였는데 위의 문장을 추가했더니 잘 반영됨

*새로고침할 때 다시 데이터를 초기화해주는 방법으로 사용