JSON 데이터를 사용하여 그리드 구성
위젯 속성 및 열 구성 속성 외에도 다음과 같은 방법으로 JSON 데이터를 사용하여 그리드 위젯 속성을 동적으로 구성할 수 있습니다.
• 구성 데이터를 생성하는 사용자 정의 데이터 서비스를 만듭니다.
• Mashup Builder의 위젯 Configuration 속성에 구성 데이터를 수동으로 추가합니다.
JSON 데이터 서비스 사용
동적 구성을 사용하는 그리드에 데이터를 표시하려면 다음 방법 중 하나를 사용하여 구성 데이터를 만들어야 합니다.
• Composer에서 사물에 대한 새 서비스를 만들고 JavaScript 데이터 서비스를 작성합니다. 사용 가능한 코드 조각 및 기타 유용한 바로 가기를 사용할 수 있습니다.
• 원하는 텍스트 편집기에서 JavaScript 서비스를 작성하고 이를 복사하여 Composer의 사물에 대한 새 데이터 서비스의 코드 편집기에 붙여 넣습니다.
• 그리드(고급)에 사용할 수 있는 샘플의 출력을 JSON 형식으로 변경합니다.
ThingWorx Composer에서 가져온 샘플 구성 서비스를 사용하려면 다음 단계를 따르십시오.
1. Composer에서 모델링/사물을 찾아 사물 GridAdvancedExampleServices를 엽니다.
2. 왼쪽 패널에서 서비스 탭을 엽니다. 그러면 사용 가능한 샘플 서비스가 오른쪽에 표시됩니다.
3. 구성 서비스 중 하나를 선택한 다음 편집을 클릭하여 스크립트 코드를 확인합니다.
4. 스크립트를 편집한 다음 저장합니다. 자세한 내용은 'JSON 구성 속성' 단원을 참조하십시오.
데이터 서비스를 사용하여 그리드를 구성하려면 다음을 수행하십시오.
1. Composer에서 동적 구성 데이터를 저장할 새 사물 엔티티와 데이터 서비스를 만듭니다.
2. 서비스에서 JavaScript 구성 서비스를 만들고 출력을 JSON으로 설정합니다.
3. Mashup Builder에서 데이터 패널을 사용하여 1단계에서 만든 사물의 구성 서비스를 추가합니다.
4. 데이터 패널에서 데이터 서비스를 확장한 다음 반환된 데이터 아래에서 모든 데이터를 확장하고 JSON 출력을 그리드 위젯의 Configuration 속성에 바인딩합니다.
 |
구성 서비스를 그리드에 바인딩하면 위젯 속성이 자동으로 숨겨집니다. 구성 서비스의 바인딩이 해제되면 다른 속성이 다시 표시됩니다.
|
5. 완료된 매쉬업을 저장하고 확인합니다.
JSON 데이터를 수동으로 사용하여 그리드를 구성하려면 다음을 수행하십시오.
1. Mashup Builder의 캔버스에서 또는 탐색기 패널을 사용하여 그리드 위젯을 선택합니다.
2. 속성 패널에서 위젯 Configuration 속성 옆에 있는 추가를 클릭합니다. 구성 대화 상자가 열립니다.
3. 그리드에 필요한 구성 데이터가 포함된 JSON 객체를 입력하거나 붙여 넣습니다.
4. 완료를 클릭합니다. 구성이 그리드에 적용됩니다.
5. 저장을 클릭하여 매쉬업을 저장합니다.
JSON 구성 속성
다음 단원에서는 그리드에 사용할 수 있는 JSON 구성 속성에 대해 설명합니다.
열 구성 속성
이 속성은 열 머리글 및 정렬 순서와 같은 그리드의 열에 대한 정의를 포함합니다.
대부분의 열 정의 속성은 Mashup Builder에서 사용할 수 있는 해당 속성과 쉽게 일치합니다. 그러나 다음과 같은 열 정의 속성은 그리드에 대한 데이터 소스가 데이터 셰이프에 연결되어 있을 때 Mashup Builder에서만 사용할 수 있습니다. 그리드 열 구성 대화 상자의 유사 옵션에 해당하는 속성은 다음과 같습니다.
• hidden - 특정 그리드 열을 초기에 표시하거나 보기에서 숨길지 여부를 정의합니다. 런타임에 열 표시 메뉴를 사용하여 열을 표시하거나 숨길 수 있습니다. 이 속성은 위젯 구성 대화 상자의 표시 속성에 해당합니다.
• inLayout - 런타임에 특정 그리드 열을 표시할지 여부를 정의합니다. false로 설정하면 최종 사용자가 열을 볼 수 없으며 런타임에 해당 표시 유형을 제어할 수 없습니다. 그러나 상태 서식 적용을 위해 열 데이터를 계속 사용할 수 있습니다. 이 속성은 위젯 구성 대화 상자의 Exclude 속성에 해당합니다.
|
|
이중 대괄호로 로컬리제이션 토큰을 배치하여 JSON 스크립트의 열 머리글 제목을 로컬리제이션할 수 있습니다. 런타임에는 로컬리제이션 테이블에 저장된 값을 사용하여 토큰화된 값이 변환됩니다.
|
"columns": {
"idFieldName": "id",
"header": {
"hide": false,
"singleLine": true,
"maxHeight": 20,
"selectionCheckboxAlignment": "bottom",
"sortSelectionColumn": true
},
"columnDefs": [
{
"targets": 0,
"fieldName": "max_temp",
"title": "Max Temp",
"width": "95px",
"autoWidth": false,
"inLayout": true,
"cellHorizontalAlignment": 'center',
"cellVerticalAlignment": 'center',
"headerHorizontalAlignment": 'center',
"headerVerticalAlignment": 'center'
"columnFormatter": {
“format": "0.00F",
"type": "number",
"stateDefinition": {
"name": "weather_eventsConf",
"fieldName": "events",
"type": "non-fixed",
"states": [
{
"name": "Rain",
"value": "Rain",
"comparator": "==",
"styleName": "tableHeaderStyle"
},
{
"name": "Fog",
"value": "Fog",
"comparator": "==",
"styleName": "FogStyle"
}
"idFieldName": "id",
"header": {
"hide": false,
"singleLine": true,
"maxHeight": 20,
"selectionCheckboxAlignment": "bottom",
"sortSelectionColumn": true
},
"columnDefs": [
{
"targets": 0,
"fieldName": "max_temp",
"title": "Max Temp",
"width": "95px",
"autoWidth": false,
"inLayout": true,
"cellHorizontalAlignment": 'center',
"cellVerticalAlignment": 'center',
"headerHorizontalAlignment": 'center',
"headerVerticalAlignment": 'center'
"columnFormatter": {
“format": "0.00F",
"type": "number",
"stateDefinition": {
"name": "weather_eventsConf",
"fieldName": "events",
"type": "non-fixed",
"states": [
{
"name": "Rain",
"value": "Rain",
"comparator": "==",
"styleName": "tableHeaderStyle"
},
{
"name": "Fog",
"value": "Fog",
"comparator": "==",
"styleName": "FogStyle"
}
ThingWorx 9.3.6 이상에서는 routeLinks 속성을 사용하여 LinkClicked 이벤트를 사용하여 링크 데이터를 라우팅할 수 있습니다.
"columnFormatter": {
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}
ThingWorx 9.4 이상에서는 showRowNumbers 속성을 동적 구성 내에서 사용할 수 있습니다.
"columns":{},
"showRowNumbers": true,
"treeGridSettings":{}
행 구성 속성
기본 행 선택, 행 높이, 행 기반 상태 서식 적용과 같은 행 속성을 구성합니다.
"rows": {
"selectedRowsChangedCallback": true,
"minHeight": 60,
"maxHeight": 100,
"singleLine": true,
"selection": "multi", // *{string} controls the row selection. Options: 'none', 'single', 'multi'
"defaultSelectedRows": "2,4",
"selectionCheckboxAlignment": 'bottom',
"rowFormatter": {
"stateDefinition": {
…
}
}
"selectedRowsChangedCallback": true,
"minHeight": 60,
"maxHeight": 100,
"singleLine": true,
"selection": "multi", // *{string} controls the row selection. Options: 'none', 'single', 'multi'
"defaultSelectedRows": "2,4",
"selectionCheckboxAlignment": 'bottom',
"rowFormatter": {
"stateDefinition": {
…
}
}
트리 그리드 구성 속성
ThingWorx 9.3.4 이상에서는 다음과 같은 구성을 사용할 수 있습니다.
"treeSettings": {
"parentIdFieldName": "parentUid",
"hasChildrenFieldName": "hasChildren",
"maxRowCacheSize": 100000,
"alwaysExpanded": false,
"expandCollapseAll": false,
"expandCollapseIcon": "plus/minus",
"focusNavigationMode": "cell-only",
"selectFocusedItem": false,
"primaryColumnFixedSize": true,
"allowDisabledNodes": true,
"disabledStateField": "disabled",
"disableChildNodes": true,
"expandAllLoadedLevels": false,
"maxExpandedRows": 6,
"preserveRowExpansion": false,
"expandRowOnDoubleClick": false,
"includeRowExpansionParents": true,
"idPathSeparator": '--'
}
"parentIdFieldName": "parentUid",
"hasChildrenFieldName": "hasChildren",
"maxRowCacheSize": 100000,
"alwaysExpanded": false,
"expandCollapseAll": false,
"expandCollapseIcon": "plus/minus",
"focusNavigationMode": "cell-only",
"selectFocusedItem": false,
"primaryColumnFixedSize": true,
"allowDisabledNodes": true,
"disabledStateField": "disabled",
"disableChildNodes": true,
"expandAllLoadedLevels": false,
"maxExpandedRows": 6,
"preserveRowExpansion": false,
"expandRowOnDoubleClick": false,
"includeRowExpansionParents": true,
"idPathSeparator": '--'
}
도구 모음 구성 속성
"toolbar":{
"actionsData": ""
"actionsPosition": "after"
}
"actionsData": ""
"actionsPosition": "after"
}
스타일 구성 속성
배경색, 테두리 스타일, 글꼴, 상태별 스타일 등 그리드 모양새를 제어하는 선택적 스타일 속성입니다. 상태 서식 적용을 위해 스타일을 정의하고 사용할 수 있습니다.
"styles": {
"rowStyle1": {
"image": "",
"backgroundColor": "#90ee90",
"fontFamily": [
"helvetica",
"arial"
],
"lineThickness": "1",
"foregroundColor": "#ffffff",
"textDecoration": "",
"lineColor": "#ff0000",
"fontSize": "11px",
"lineStyle": "solid",
"fontStyle": "normal",
"fontWeight": "bold",
"secondaryBackgroundColor": ""
}
}
"rowStyle1": {
"image": "",
"backgroundColor": "#90ee90",
"fontFamily": [
"helvetica",
"arial"
],
"lineThickness": "1",
"foregroundColor": "#ffffff",
"textDecoration": "",
"lineColor": "#ff0000",
"fontSize": "11px",
"lineStyle": "solid",
"fontStyle": "normal",
"fontWeight": "bold",
"secondaryBackgroundColor": ""
}
}
|
|
글꼴 속성의 제어는 서비스로 구성할 때에만 사용 가능합니다. 글꼴 선택은 Mashup Builder에서 사용할 수 있는 속성이 아닙니다.
|
위젯 레이블
"label": {
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}
편집 모드 및 버튼
editButtons에서 그리드에 대한 편집을 구성할 수 있습니다.
"editButtons": {
"enabled": true,
"editButton": true,
"editLevel": "row", //* Controls the edit level. Options: "row", "cell", "grid"
"DeleteButton": true,
"rowAddButton": true
"editControlVisibility": "hover", // Controls the visibility of the edit controls on the grid. Options: 'hover', 'always', 'never'}
"editControlType": "link",
"editControlLabel": "Edit",
"editControlIcon": ""
}
"enabled": true,
"editButton": true,
"editLevel": "row", //* Controls the edit level. Options: "row", "cell", "grid"
"DeleteButton": true,
"rowAddButton": true
"editControlVisibility": "hover", // Controls the visibility of the edit controls on the grid. Options: 'hover', 'always', 'never'}
"editControlType": "link",
"editControlLabel": "Edit",
"editControlIcon": ""
}
열 구성 메뉴
"columnsMenu": {
"options": "both", // Controls the options that are available within the menu. Options: "none", "reorder", "show", "both"
"visibleItems": 6,
"label": "Data View"
}
"options": "both", // Controls the options that are available within the menu. Options: "none", "reorder", "show", "both"
"visibleItems": 6,
"label": "Data View"
}
유효성 검사
"validation" : {
"showSuccess": true,
"successIcon": "/Thingworx/MediaEntities/SuccessIcon",
"showFailure": true,
"failureIcon": "/Thingworx/MediaEntities/FailureIcon",
"showCriteria": true,
"criteriaIcon: "/Thingworx/MediaEntities/CriteriaIcon"
}
"showSuccess": true,
"successIcon": "/Thingworx/MediaEntities/SuccessIcon",
"showFailure": true,
"failureIcon": "/Thingworx/MediaEntities/FailureIcon",
"showCriteria": true,
"criteriaIcon: "/Thingworx/MediaEntities/CriteriaIcon"
}
일반 옵션
"filter": {
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true