Salesforce Tree Grid 를 활용한 조직도 구현

Salesforce에서 조직도를 구현할 때, 계층 구조를 표현하는 Tree Grid를 사용할 수 있습니다. Salesforce Tree Grid 기본적으로 lightning:treeGrid를 활용하면 데이터 구조에 맞춰 계층을 표현할 수 있으며, 이를 효과적으로 활용하기 위해 JavaScript를 사용하여 JSON 데이터를 가공할 필요가 있습니다.

1. Tree Grid와 JSON 데이터 구조

Salesforce에서는 lightning:treeGrid를 활용하면 계층적인 데이터를 시각적으로 표현할 수 있습니다. Tree Grid에서 사용하는 데이터는 JSON 형식으로 구성되며, 하위 데이터는 _children 속성을 통해 계층 구조를 유지해야 합니다.

데이터 예시

var nestedData = [
    {
        "name": "123555",
        "accountName": "Rewis Inc",
        "employees": 3100,
        "phone": "837-555-1212",
        "accountOwner": "http://example.com/jane-doe",
        "accountOwnerName": "Jane Doe",
        "billingCity": "Phoeniz, AZ"
    },
    {
        "name": "123556",
        "accountName": "Acme Corporation",
        "employees": 10000,
        "phone": "837-555-1212",
        "accountOwner": "http://example.com/john-doe",
        "accountOwnerName": "John Doe",
        "billingCity": "San Francisco, CA",
        "_children": [
            {
                "name": "123556-A",
                "accountName": "Acme Corporation (Bay Area)",
                "employees": 3000,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/john-doe",
                "accountOwnerName": "John Doe",
                "billingCity": "New York, NY"
            }
        ]
    }
];

2. Apex에서 JSON 데이터 반환

Apex에서는 조직도를 위한 데이터를 리스트로 받아 JSON 형태로 변환하여 프론트엔드로 전달합니다.

Apex Controller (treeTestController.cls)

public class treeTestController {
    @AuraEnabled
    public static String getTreeData() {
        List<Items> returnList = new List<Items>();
        List<TestOrg__c> rootOrg = [SELECT Id, Name, UpperId__c, levelName FROM TestOrg__c];

        for (TestOrg__c rootOrgVo : rootOrg) {
            Items itemSet = new Items();
            itemSet.name = rootOrgVo.Name;
            itemSet.Id = rootOrgVo.Id;
            itemSet.type = rootOrgVo.levelName;
            itemSet.upperId = rootOrgVo.UpperId__c;
            returnList.add(itemSet);
        }
        return JSON.serialize(returnList);
    }
}

3. JavaScript를 활용한 Tree 구조 변환

Apex에서 전달된 JSON 데이터는 평면적인 리스트 형태이기 때문에, 이를 계층 구조로 변환하는 작업이 필요합니다. JavaScript를 활용하여 데이터를 변환하면 조직도를 효과적으로 표현할 수 있습니다.

JavaScript Helper (treeTestHelper.js)

let data = response.getReturnValue();
let items = JSON.parse(data);

var roots = [], _children = {};

// 최상단 레벨(root)과 하위(children) 구분
for (var i = 0, len = items.length; i < len; ++i) {
    var item = items[i],
        p = item.upperId,
        target = !p ? roots : (_children[p] || (_children[p] = []));

    target.push(item);
}

// 하위 계층을 재귀적으로 추가하는 함수
var findChildren = function(upperId) {
    if (_children[upperId.Id]) {
        upperId._children = _children[upperId.Id];
        for (var i = 0, len = upperId._children.length; i < len; ++i) {
            findChildren(upperId._children[i]);
        }
    }
};

// 최상위 root 노드에 대해 하위 구조를 찾아 계층을 완성
for (var i = 0, len = roots.length; i < len; ++i) {
    findChildren(roots[i]);
}

4. lightning:treeGrid를 활용한 조직도 표시

위에서 JSON 데이터를 계층 구조로 변환한 후, lightning:treeGrid를 이용하여 화면에 표시할 수 있습니다.

Aura Component (treeGridComponent.cmp)

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="gridData" type="Object" />
    <lightning:treeGrid
        aura:id="treeGrid"
        columns="{!v.columns}"
        data="{!v.gridData}"
        keyField="Id"
        hideCheckboxColumn="true" />
</aura:component>

결론

Salesforce에서 lightning:treeGrid를 활용하여 조직도를 구현하는 방법을 살펴보았습니다. Apex를 통해 데이터를 JSON 형식으로 반환하고, JavaScript를 이용하여 계층 구조를 변환한 후, lightning:treeGrid를 사용하여 시각적으로 표현하는 것이 핵심입니다. 이를 활용하면 조직도를 손쉽게 생성하고 관리할 수 있습니다.