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

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

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

시작하려면 아래 섹션을 참고하세요.

구성 파일 생성

구성 파일은 앱 템플릿의 구성 옵션을 정의하는 JSON 파일입니다. 이 파일에는 옵션을 분류하는 섹션이 하나 이상 있습니다.

fieldName 등록정보는 구성 설정 내에서 고유해야 합니다.

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

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

아래 표에 나와 있는 필드 유형을 사용하여 구성 옵션을 지정합니다.

필드 유형	설명
문단	구성 대화 상자에 설명 텍스트를 보여줍니다. { "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" }
불린(Boolean)	true 또는 false 값을 지정하는 체크 박스를 생성합니다. { "type": "boolean", "fieldName": "displaytitle", "label": "Show Title", "tooltip": "" }
숫자	숫자 값을 허용하는 필드를 생성합니다. 필드에서 특정 범위의 값만 허용해야 하는 경우 constraints 설정을 사용하여 입력을 특정 범위의 값으로 제한하거나 입력 값의 형식을 지정할 수 있습니다. { "type": "number", "fieldName": "range", "label": "Range:", "tooltip": "", "constraints" :{min:0,max:10,places:0} }
옵션	일련의 선택 항목이 있는 드롭다운 목록을 생성합니다. { "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" }] }
색상 선택기	사용자가 팔레트에서 색상을 선택하거나 16진수 값, RGB 또는 HSV 값을 지정할 수 있는 색상 선택기를 보여줍니다. { "type": "color", "label": "Choose a selection color", "fieldName": "selectionColor" }
웹 맵 대화 상자	앱에 나타낼 새 지도를 검색할 수 있는 대화 상자를 보여줍니다. { "type": "webmap" }
그룹 대화 상자	앱에 나타낼 새 그룹을 검색할 수 있는 대화 상자를 보여줍니다. { "type": "group" }
다중 레이어 및 필드 선택기	지원되는 유형과 지오메트리 유형에 일치하는 레이어 및 필드에 대한 트리 보기를 맵에 나타냅니다. 이 기능을 통해 앱 최종 사용자는 여러 레이어를 선택하고 각 레이어에 대해 여러 필드를 선택할 수 있습니다. { "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" ] } }
레이어 및 필드 선택기	나열된 유형 및 지오메트리에 의해 필터링된 레이어에 대한 드롭다운 목록을 맵에 나타냅니다. 필요에 따라, 사용자가 단일 레이어와 해당 필드를 선택할 수 있는 필드 선택기를 하나 이상 지정합니다. { "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" ] } }
라디오	한 번에 한 옵션만 선택할 수 있는 라디오 버튼을 생성합니다. 선택한 옵션은 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 }] }
베이스맵	이름이 있는 모든 Esri 베이스맵에 대한 드롭다운 목록을 표시합니다. { “type”: “basemaps”, “fieldname” :”my_basemap”, “label”: “Alternate Basemap” }
조건(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" } ] } }

구성 파일 예

다음은 완성된 구성 파일의 예입니다.

{
    "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       }
 }

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

구성 파일을 생성하고 나면 사용자 정의 앱 템플릿과 연결하고 앱을 구성 가능하게 만들 준비가 완료됩니다. 먼저, 템플릿을 ArcGIS Online의 새 앱 항목으로 추가하고 용도를 구성 설정으로 설정합니다(아직 이러한 작업을 수행하지 않은 경우). 그런 다음 앱의 항목 페이지를 열어 설정 탭을 클릭하고 구성 파일의 JSON 코드를 복사한 다음 구성 매개변수 상자에 붙여넣습니다.

참고 사항:

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

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