템플릿에 구성 가능한 매개변수 추가

웹 앱 템플릿을 생성한 후에는 템플릿을 구성 설정 템플릿으로 지정할 수 있습니다. 구성 설정 웹 앱을 사용하면 사용자가 앱의 모양과 동작을 사용자 정의할 수 있습니다. 앱 템플릿을 구성 가능하게 만드는 과정은 4단계로 나뉩니다.

1. 아직 웹 앱 템플릿을 생성하지 않은 경우 지금 생성합니다.
2. 원하는 구성 등록정보를 정의하는 구성 파일을 생성합니다.
3. 구성 등록정보를 읽고 앱에 적용하도록 템플릿을 설정합니다.
4. 구성 파일을 앱 템플릿 항목과 연결합니다.

구성 파일 생성

구성 파일은 앱 템플릿의 구성 옵션을 정의하는 JSON 파일입니다. 구성 파일에 대한 예시를 참고하세요.

비고:

JSONLint와 같은 유효성 검사기를 통해 JSON을 실행하여 사용 중인 JSON 코드가 오류 없이 제대로 구성되었는지 확인하는 것이 좋습니다.

구성 파일에는 옵션을 분류하는 하나 이상의 섹션이 있습니다.

범주 및 필드 세트를 지정하여 각 섹션을 생성합니다.

{
    "configurationSettings": [
        {
            "category": "",
            "fields": []
        }
    ]
}

아래 표에 나와 있는 필드 유형을 사용하여 구성 옵션을 지정합니다. 구성 파일 생성 시 fieldName 속성은 구성 설정 내에서 고유해야 합니다.

필드 유형	설명
문단	구성 대화상자에 설명 텍스트를 표시합니다. { "type": "paragraph", "value": "* These menu items will appear in the application when the web map has layers that require them." }
문자열	텍스트를 입력할 수 있습니다. 화면에 나타나는 텍스트 상자 유형을 지정하는 stringFieldOption 등록정보를 포함하며, 값은 textbox, textarea, richtext입니다. textbox 옵션은 기본값이며 한 줄 텍스트 상자입니다. textarea 옵션은 데이터를 입력할 수 있는 더 큰 텍스트 상자를 보여 줍니다. richtext 옵션은 사용자가 굵게 또는 기울임 글꼴을 텍스트에 설정하는 등 일부 서식을 적용할 수 있는 서식 있는 텍스트 편집기를 보여 줍니다. { "type": "string", "fieldName": "description", "label": "Description", "tooltip": "", "stringFieldOption": richtext || textarea || textbox, "placeHolder": "Text that appears in the text box to provide a hint to users on text to enter" } 샘플 결과 description:"Bike Accidents"
불린(Boolean)	true 또는 false 값을 지정하는 체크 박스를 생성합니다. condition을 사용하여 맵에 지정된 기능이 포함되어 있는지 확인합니다. 맵이 조건을 충족하지 않는 경우 구성 패널에 체크 박스와 레이블이 표시되지 않습니다. { "type": "boolean", "fieldName": "tool_bookmarks", "condition": "bookmark", "label": "Bookmarks", "tooltip": "" } 샘플 결과 tool_bookmarks:false
숫자(Number)	숫자 값을 허용하는 필드를 생성합니다. 필드에서 특정 범위의 값만 허용해야 하는 경우 constraints 설정을 사용하여 입력을 특정 범위의 값으로 제한하거나 입력 값의 형식을 지정할 수 있습니다. { "type": "number", "fieldName": "range", "label": "Range:", "tooltip": "", "constraints" :{min:0,max:10,places:0} } 샘플 결과 range:0.5
옵션	일련의 선택 항목이 있는 드롭다운 목록을 생성합니다. { "type": "options", "fieldName": "theme", "tooltip": "Color theme to use", "label": "Color Scheme:", "options": [{ "label": "Blue", "value": "blue" }, { "label": "Green", "value": "green" }, { "label": "Orange", "value": "orange" }] } 샘플 결과 theme:"blue"
색상 선택기	팔레트에서 색상을 선택하거나 16진수 값, RGB 또는 색상, 채도, 명도(HSV) 값을 지정할 수 있는 색상 선택기를 표시합니다. { "type": "color", "label": "Choose a selection color", "fieldName": "selectionColor" } 샘플 결과 selectionColor:"#829254"
웹 맵 대화 상자	앱에 나타낼 새 맵을 검색할 수 있는 대화 상자를 보여줍니다. 필요에 따라 맵을 테스트할 조건을 지정합니다. 지정한 조건을 충족하지 않으면 구성 패널에 유효성 검증 메시지가 나타나 맵이 요구 사항을 충족시키지 않음을 알려줍니다. 유효한 조건 문자열은 다음과 같습니다. time - 시계열 맵입니다. edit - 앱에 편집 가능한 레이어가 하나 이상 있습니다. featurelayer - 맵에 피처 레이어가 하나 이상 있습니다. filter - 맵에 대화형 필터가 정의되어 있습니다. 4x - 맵에 ArcGIS API for JavaScript 4x 버전에서 아직 지원되지 않는 콘텐츠가 포함되어 있습니다. { “type”: “webmap”, “conditions”: [“time”, “edit”, “featurelayer”, “filter”, “4x”] } 샘플 결과 webmap:"739ef0cf75de432995c77dd44ec8f652"
그룹 대화 상자	앱에 나타낼 새 그룹을 검색할 수 있는 대화 상자를 보여줍니다. { "type": "group" } 샘플 결과 group:"449d00a4478d4849bbb65612355d6cd1"
다중 레이어 및 필드 선택기	지원되는 유형과 지오메트리 유형에 일치하는 레이어 및 필드에 대한 트리 보기를 맵에 나타냅니다. 이 기능을 통해 앱 최종 사용자는 여러 레이어를 선택하고 각 레이어에 대해 여러 필드를 선택할 수 있습니다. { "label":"Select search layers and fields", "fieldName":"searchLayers", "type":"multilayerandfieldselector", "tooltip":"Select layer and fields to search", "layerOptions":{ "supportedTypes":[ "FeatureLayer" ], "geometryTypes":[ "esriGeometryPoint", "esriGeometryLine", "esriGeometryPolyline", "esriGeometryPolygon" ] }, "fieldOptions":{ "supportedTypes":[ "esriFieldTypeString" ] } } 샘플 결과 searchLayers: [{ "id":"Whittier_Hazards_821", "fields":[], "type":"FeatureLayer" }]
레이어 및 필드 선택기	나열된 유형 및 지오메트리에 의해 필터링된 레이어에 대한 드롭다운 목록을 맵에 나타냅니다. 필요에 따라, 사용자가 단일 레이어와 해당 필드를 선택할 수 있는 필드 선택기를 하나 이상 지정합니다. { "type":"layerAndFieldSelector", "fieldName":"tableLayer", "label":"Layer to display in table", "tooltip":"Layer to display in table", "fields":[ { "multipleSelection":true, "fieldName":"hiddenFields", "label":"Hide the selected fields", "tooltip":"Fields to hide in table", "supportedTypes":[ "esriFieldTypeSmallInteger", "esriFieldTypeInteger", "esriFieldTypeSingle", "esriFieldTypeDouble", "esriFieldTypeString" ] } ], "layerOptions":{ "supportedTypes":[ "FeatureLayer" ], "geometryTypes":[ "esriGeometryPoint", "esriGeometryLine", "esriGeometryPolygon" ] } } 샘플 결과 tableLayer: { id: "2014CyclingAccidents_All_874", fields: [{ id: "urlField", fields: ["Casualty_Severity"] }] }
라디오	한 번에 한 옵션만 선택할 수 있는 라디오 버튼을 생성합니다. 선택한 옵션은 true로 설정됩니다. { "type": "radio", "fieldName": "layout", "tooltip": "Custom Layout", "label": "Custom Layout:", "items": [{ "label": "Sidebar", "value": "sidebarmenu" }, { "label": "FullWidth", "value": "fullwidth" }, { "label": "default", "value": "Default", "checked": true }] } 샘플 결과 customLayout:"fullmap"
베이스맵	이름이 있는 모든 Esri 베이스맵에 대한 드롭다운 목록을 표시합니다. { “type”: “basemaps”, “fieldname” :”my_basemap”, “label”: “Alternate Basemap” } 샘플 결과 my_basemap:"satellite"
조건(Conditional)	true 또는 false 조건에 따라 콘텐츠를 표시하거나 숨깁니다. 예를 들어 레이어 목록 표시 체크 박스를 선택 취소한 경우 레이어 목록과 모든 관련 옵션(예: 레이어 목록에 하위 레이어 포함)이 숨겨집니다. { "type":"conditional", "condition": false, "fieldName":"showtitle", "label":"Display Map Title", "items":[ { "placeHolder":"Defaults to web map title", "label":"Title:", "fieldName":"title", "type":"string", "tooltip":"Defaults to web map title" },{ "type":"paragraph", "value":"Enter a value to override the default title font size " }, { "type":"string", "label":"Title font size", "tooltip":"Specify title font size", "fieldName":"titlefontsize", "placeHolder":"20px" } ] } }
검색	피처 레이어 필드 내에서 피처를 찾거나 로케이터를 사용하여 주소를 찾을 수 있는 검색 창을 구성합니다. 피처 검색을 구성한 경우 사용자는 피처 레이어를 선택하고 필드를 검색할 수 있습니다. { “type”: “Search”, “fieldName”: “searchConfig”, “label”: “Configure Search Options” } 샘플 결과 searchConfig: { sources: [{ locator: { url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer", _url: { path: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer", query: null }, normalization: true }, url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer", name: "ArcGIS World Geocoding Service", enableSuggestions: true, singleLineFieldName: "SingleLine", enable: true, id: "dojoUnique3" }], activeSourceIndex: 0, enableSearchingAll: false }
축척 목록(ScaleList)	사용자가 선택할 수 있는 미리 정의된 축척 레벨 목록을 표시합니다. 예를 들어 국가, 주, 카운티, 광역시, 구/군/시, 구, 동 등을 선택할 수 있습니다. { “type”: “scaleList”, “fieldName”: “customUrlLayerZoomScale”, “label”: “Choose zoom level” } 출력 예시 “customUrlLayerZoomScale”: 12000

구성 파일 예시

다음은 전체 구성 파일의 예시입니다.

{
    "configurationSettings": [        {
            "category": "General Settings",            "fields": [                {
                    "type": "options",                    "fieldName": "theme",                    "tooltip": "Color theme to use",                    "label": "Color Scheme:",                    "options": [                        {
                            "label": "Blue",                            "value": "blue"
                        },                        {
                            "label": "Green",                            "value": "green"
                        },                        {
                            "label": "Orange",                            "value": "orange"
                        }
                    ]                },                {
                    "type": "string",                    "fieldName": "layer",                    "label": "Analysis Layer",                    "tooltip": "Feature Layer with Facilities to search"
                },                {
                    "type": "string",                    "fieldName": "orgname",                    "label": "Organization Name:",                    "tooltip": "",                    "stringFieldOption": "richtext",                    "placeHolder": "Organization Name"
                },                {
                    "type": "number",                    "fieldName": "bufferdistance",                    "label": "Search Distance (miles)",                    "value": "1"
                }
            ]        }
    ],    "values": {
        "theme": "orange",        "bufferdistance": 1    }
}

구성 파일 정보를 읽도록 템플릿 설정

템플릿을 구성 설정 템플릿으로 지정하려면 앱에서 웹 매핑 응용프로그램의 항목 ID를 appid URL 매개변수의 값으로 허용해야 합니다. 이 ID는 앱의 구성 등록정보를 검색하기 위한 비동기 요청에 사용됩니다. ArcGIS API for JavaScript에서는 esri.request을(를) 사용하여 앱 구성 세부정보를 검색할 수 있습니다.

이 예에서 esri.arcgis.utils.arcgisUrl은(는) www.arcgis.com/sharing/content/items(으)로 확인됩니다.

var requestHandle = esri.request({
    url: esri.arcgis.utils.arcgisUrl + "/" + appid + "/data",
    content: {
        f: "json"
     },
    callbackParamName: "callback",
    load: function (response) {
     for (var key in response.values){
      if(response.values[key]!==undefined)configOptions[key]=response.values[key];
      }
    }, 
});

응답에는 사용자가 구성 창을 사용하여 앱에 적용한 변경 내용이 포함됩니다. 그러면 변경 내용을 검색하여 앱에 적용할 수 있습니다. 앱에서는 템플릿이 구성되지 않은 상황을 처리하기 위해 구성 옵션에 대한 기본 값을 정의해야 합니다.

 {
    "source": "15a34e2c161b4364860854fbc84262c5",    "folderId": "5705faa4594a4fd09edf01742c16e523",    "values": {
        "webmap": "32f1438789d34b5e8125f0f7c64b8d63",        "layer":"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer/2",        "theme": "green",        "orgname": "Water Points",        "bufferdistance": 3       }
 }

구성 파일 정보를 앱 템플릿 항목과 연결

구성 파일을 생성하고 나면 사용자 정의 앱 템플릿과 연결하고 앱을 구성 가능하게 만들 준비가 완료됩니다.

1. 앱 템플릿을 새 앱 항목으로 추가합니다(아직 추가하지 않은 경우).
2. 앱 템플릿의 항목 페이지에서 설정 탭을 클릭하고 웹 매핑 응용프로그램 섹션을 찾습니다.
3. 용도 드롭다운 메뉴에서 구성 가능설정을 선택합니다.
4. 구성 파일의 JSON 코드를 구성 매개변수 필드에 붙여넣습니다.

   비고:

   구성 매개변수 필드에는 유효한 JSON이 필요합니다. JSONLint와 같은 유효성 검사기를 통해 JSON을 실행하여 사용 중인 JSON이 오류가 없고 제대로 구성되었는지 확인하는 것이 좋습니다.

5. 저장을 클릭하여 설정을 저장합니다.

내 기관의 Map Viewer 앱 갤러리 또는 그룹 앱 갤러리에 있는 구성 설정 템플릿을 사용하려면 해당 앱 갤러리의 그룹과 항목을 공유합니다. 그런 다음 기관의 관리자는 사용자의 템플릿이 포함된 그룹을 사용하도록 맵을 구성하거나 그룹을 구성할 수 있습니다.