구성 설정 앱 템플릿 생성—Portal for ArcGIS

콘텐츠를 생성할 권한이 있으면 고유한 사용자 정의 앱 템플릿을 생성할 수 있습니다. 사용자 정의 앱 템플릿을 생성하여 구성하면 포털에 내 템플릿을 추가하여 ArcGIS에서 내 앱이 검색되도록 할 수 있습니다. 그러면 사용자가 모양 및 동작을 사용자 정의하기 위해 앱을 구성할 수 있도록 할 수 있습니다. 또한 기관에서 템플릿을 해당 갤러리 중 하나에 포함할 계획인 경우 앱 템플릿 그룹과 공유할 수 있습니다.

웹앱 템플릿 생성 및 구성

사용자 정의 웹앱 템플릿을 생성하려면 기존 ArcGIS Configurable Apps 템플릿 중 하나를 다운로드하여 수정하거나, 포털의 콘텐츠와 함께 작동하도록 기존 웹앱을 업데이트하거나, ArcGIS 웹 API 중 하나를 사용하여 새 웹앱을 생성하면 됩니다.

어떤 방법으로 앱을 생성하든 URL 매개변수 및 맵을 사용하게 됩니다. 그룹 기반 앱 템플릿을 생성할 경우 그룹과 함께 작업할 수 있습니다. 이때 Bing Maps 베이스맵 작업, 비공개 맵 접근, 프록시, CORS(Cross-Origin Resource Sharing)가 필요한 리소스 작업에 대한 추가 요구 사항을 고려할 수 있습니다.

ArcGIS Enterprise 포털에는 ArcGIS API 3.35 for JavaScript 10.9가 포함되어 있습니다. 자체 API를 호스팅하고 포털이 새로 생성된 앱 템플릿의 로컬 버전을 가리키도록 지정할 필요가 없습니다. 웹앱 템플릿에서 설치된 API를 자동으로 참조합니다. 로컬로 설치된 API는 일반적으로 https://webadaptorhost.domain.com/webadaptorname/jsapi/jsapi에서 사용할 수 있습니다.

주의:

ArcGIS Enterprise와 함께 제공된 웹앱 템플릿 파일을 변경하지 마세요. 이러한 파일은 포털에서 관리되므로 변경할 경우 포털에서 덮어쓸 수 있습니다. 템플릿을 사용자 정의하려면 다음과 같이 하세요.

사용자 정의할 기존 템플릿 파일의 복사본을 만듭니다.
복사본을 디스크의 다른 위치에 저장합니다.
템플릿 복사본을 사용자 정의합니다.
포털에 새 템플릿으로 추가합니다.

웹 맵

앱 템플릿은 Map Viewer에 현재 표시된 맵을 사용하도록 설계되었습니다. 일반적으로 템플릿은 웹맵 URL 매개변수에 지정된 웹맵을 기반으로 맵을 생성합니다. 각각의 웹 API에는 웹맵 ID의 정보를 사용하여 맵을 생성하는 헬퍼 메소드가 있습니다.

예를 들어 ArcGIS API for JavaScript esri.arcgis.utils.createMap 메소드를 사용하여 입력 ID를 기반으로 맵을 생성할 수 있습니다. 또한 esri.arcgis.utils.createMap에 대한 동기 요청이 완료된 경우에 실행되는 콜백 함수를 포함할 수 있습니다.

esri.arcgis.utils.createMap(webmap,"map",{
   mapOptions:{
     slider:false
   },
   bingMapsKey:bingMapsKey
}).then(function(response){
    map = response.map;
});

비고:

웹맵에 Bing Maps 베이스맵이 포함된 경우 createMap 메소드를 사용할 때 Bing Maps 키를 지정해야 합니다. 그 밖에도 슬라이더, 탐색, 속성 등의 보기 여부와 같은 여러 가지 기타 맵 옵션을 지정할 수 있습니다.

callback 함수는 맵 개체, 레이어 등에 접근할 수 있는 응답 개체에 대한 접근 권한을 제공합니다.

그룹

그룹 템플릿은 지정된 그룹의 콘텐츠를 앱으로 보여줍니다.

ArcGIS REST API를 사용하면 포털의 콘텐츠에 접근할 수 있습니다. 이를 사용하여 입력된 그룹 ID를 기반으로 그룹 콘텐츠를 검색할 수 있습니다.

다음 예시에서는 입력 ID로 그룹을 찾기 위해 쿼리를 수행합니다.

var portal = new esri.arcgis.Portal('https://webadaptorhost.domain.com/webadaptorname/');
dojo.connect(portal, 'onLoad',function(){
    portal.queryGroup(groupid).then(function(response){
        var group = response.results[0];
     });
});

그룹을 찾은 후에는 그룹에서 항목을 검색하기 위해 쿼리할 수 있습니다.

이 예시에서는 그룹을 쿼리하여 유형이 Web Map 또는 Web Mapping Application인 항목 5개를 찾습니다.

var queryParams = {
    q: 'type:"Web Map" -type:"Web Mapping Application"',
    num: 5
 };
group.queryItems(queryParams).then(function(response){
    var groupItems = response.results;
});

추가 고려 사항

일반적으로 웹앱은 많은 유형의 콘텐츠를 사용하도록 설계되므로 Bing Maps 베이스맵, 비공개 콘텐츠 등이 포함된 맵을 처리하도록 템플릿을 설정해야 할 수 있습니다. 특정 고려 사항은 다음과 같습니다.

Bing Maps 키

표시하려는 맵에서 Bing Maps 베이스맵을 사용하는 경우 앱에 Bing Maps 키를 포함해야 합니다. Bing Maps 키는 createMap 메소드의 매개변수로 제공됩니다.

프록시 및 CORS 지원

앱에서 교차 도메인 요청을 보내는 경우 CORS를 활성화하거나 앱에 프록시를 추가해야 합니다.

템플릿을 포털에 추가

웹앱 템플릿을 생성하면 포털에 내 템플릿을 추가하여 ArcGIS에서 내 앱이 검색되도록 할 수 있습니다.

앱 항목으로 템플릿 추가

포털에 템플릿을 웹앱 항목으로 추가하고 앱에 대한 URL을 지정합니다. 목적에 대해 구성 가능을 선택하세요. API에서 자바스크립트를 선택합니다.

템플릿을 추가하면 내 콘텐츠에 템플릿 항목이 표시되고 해당 세부정보를 편집할 수 있습니다. 제목 및 요약 정보는 사용자가 구성 설정 앱 갤러리에서 이 항목을 가리킬 때 나타나므로, 자세히 입력해야 합니다. 필요한 경우 앱 파일이 포함된 .zip 파일을 생성해 항목에 첨부하여 다운로드 기능을 제공할 수 있습니다.

앱 템플릿 등록

앱 템플릿을 항목으로 추가한 후에는 앱을 등록해야 합니다. 개발한 OAuth 2.0 기반 앱을 등록할 수 있습니다. 포털에 앱을 등록하면 앱 ID가 제공됩니다. 앱 ID는 앱을 배포하고 사용 보고서를 가져오기 위한 기준으로 사용됩니다.

웹앱 템플릿을 등록하는 경우 템플릿 앱 URL을 가리키는 재전송 URI를 사용하여 유형을 브라우저로 설정합니다.

등록된 앱 ID를 인식하도록 Identity Manager로 작업합니다. 자세한 내용은 ArcGIS API for JavaScript에 포함되어 있는 OAuth Basic 및 OAuth Popup OAuth 샘플을 참고하세요.

구성 설정 앱으로 지정

사용자 정의 웹앱의 모양 및 동작을 사용자 정의할 수 있도록 하려면 구성 설정으로 지정하면 됩니다. 예를 들어 사용자가 앱 색상을 변경하거나 앱의 기타 설정을 사용자 정의하도록 허용할 수 있습니다.

구성 설정 앱으로 지정하려면 구성 파일을 만든 다음, 생성한 앱 템플릿 항목과 구성 파일 정보를 연결합니다.

구성 파일 생성

앱 구성 파일은 앱 템플릿의 구성 옵션을 정의하는 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`
숫자	숫자 값을 허용하는 필드를 생성합니다. 필드에서 특정 범위의 값만 허용해야 하는 경우 constraints 설정을 사용하여 입력을 특정 범위의 값으로 제한하거나 입력 값의 형식을 지정할 수 있습니다. `{ "type": "number", "fieldName": "range", "label": "Range:", "tooltip": "", "constraints" :{min:0,max:10,places:0} }` 샘플 결과 `range:0.5`
날짜 및 시간	날짜 선택 항목이 있는 날짜 선택기를 생성합니다. `{ "type":"date", "fieldName" : "startDate", "label" : "Start Date" }` 시간 선택 항목이 있는 시간 선택기를 생성합니다. `{ "type": "time", "fieldName": "startTime", "label": "Start Time" }` 날짜 및 시간 샘플 결과(ISO-8601 형식) `Start Date and Time: 1970-01-01T21:30:00.000Z`
옵션	일련의 선택 항목이 있는 드롭다운 목록을 생성합니다. `{ "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": "webscene" }` 샘플 결과 `webscene:"ab41c86a588748128e6f5d80990a2395"`
그룹 대화 상자	앱에 나타낼 새 그룹을 검색할 수 있는 대화 상자를 보여줍니다. `{ "type": "group" }` 샘플 결과 `group:"449d00a4478d4849bbb65612355d6cd1"`
다중 레이어 및 필드 선택기	지원되는 유형과 지오메트리 유형에 일치하는 레이어 및 필드에 대한 트리 보기를 맵에 나타냅니다. 이 기능을 통해 앱 최종 사용자는 여러 레이어를 선택하고 각 레이어에 대해 여러 필드를 선택할 수 있습니다. 비고: editOnly가 true로 설정된 경우 필드 목록에는 편집 가능한 필드만 포함됩니다. `{ "label":"Select search layers and fields", "fieldName":"searchLayers", "type":"multilayerandfieldselector", "editOnly":true, "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" }]`
레이어 및 필드 선택기	나열된 유형 및 지오메트리에 의해 필터링된 레이어에 대한 드롭다운 목록을 맵에 나타냅니다. 필요에 따라, 사용자가 단일 레이어와 해당 필드를 선택할 수 있는 필드 선택기를 하나 이상 지정합니다. 비고: editOnly가 true로 설정된 경우 필드 목록에는 편집 가능한 필드만 포함됩니다. { "type":"layerAndFieldSelector", "fieldName":"tableLayer", "label":"Layer to display in table", "tooltip":"Layer to display in table", "fields":[ { "multipleSelection":true, "editOnly":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"`
조건	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 }`
축척 목록	사용자가 선택할 수 있는 미리 정의된 축척 레벨 목록을 표시합니다. 예를 들어 국가, 시/도, 시/군/구/동 등을 선택할 수 있습니다. `{ “type”: “scaleList”, “fieldName”: “customUrlLayerZoomScale”, “label”: “Choose zoom level” }` 샘플 결과 `“customUrlLayerZoomScale”: 12000`
범위 맵	맵 중심 및 확대 수준 옵션을 사용하여 선택기를 생성합니다. `{ "type":"extentMap", "label": "Select center and zoom", "fieldName": "mapExtent" }` 샘플 결과 `mapExtent: { level: 2, coords: { latitude: 51.304, longitude: -98.7231 } }`

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

구성 파일을 생성한 후에는 JSON 구성 정보를 앱 템플릿과 연결하여 구성 설정 템플릿으로 지정해야 합니다.

앱 템플릿의 항목 페이지에서 설정 탭을 클릭하고 상단의 웹 매핑 응용프로그램 링크를 클릭합니다.
구성 매개변수 상자에서 구성 파일의 JSON 코드를 붙여넣습니다.
비고:
구성 매개변수 상자에는 유효한 JSON이 필요합니다. JSONLint와 같은 유효성 검사기를 통해 JSON을 실행하여 사용 중인 JSON이 오류가 없고 제대로 구성되었는지 확인하는 것이 좋습니다.
설정을 저장합니다.

구성 파일 예시

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

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

내 기관 갤러리의 템플릿 포함

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

이 항목에 대한 피드백을 제공하시겠습니까?