إضافة المعلمات القابلة للتكوين إلى القوالب

بمجرد إنشاء قالب تطبيق ويب، يمكنك جعله قابلاً للتكوين. تسمح تطبيقات الويب القابلة للتكوين للمستخدمين بتخصيص مظهر وسلوك التطبيق. جعل قالب التطبيق قابلًا للتكوين عبارة عن عملية مكونة من أربع خطوات:

1. إذا لم تقم بذلك، قم بإنشاء قالب تطبيق الويب.
2. أنشئ ملف تكوين لتعريف خصائص التكوين.
3. قم بإعداد القالب لقراءة خصائص التكوين وتطبيقها على التطبيق.
4. قم بإقران ملف التكوين مع العنصر لقالب التطبيق.

إنشاء ملف التكوين

ملف التكوين هو ملف JSON الذي يقوم بتعريف خيارات التكوين لقالب التطبيق. راجع مثالاً كاملاً لملف التكوين.

ملاحظة:‏

تتمثل إحدى أفضل الممارسات في تشغيل JSON الخاص بك من خلال مدقق، مثل JSONLint للتأكد من البنية الصحيحة لـ 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"
منطقي	يقوم بإنشاء خانة اختيار لتحديد 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": "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"
منتقى الألوان	يعرض منتقى لاختيار الألوان من اللوحة أو تحديد قيم hex أو rgb أو hsv. { "type": "color", "label": "Choose a selection color", "fieldName": "selectionColor" } مخرجات العينة selectionColor:"#829254"
مربع حوار خريطة الويب	يعرض مربع حوار لتصفح أو البحث عن خريطة جديدة لعرضها في التطبيق. حدد شرطًا اختياريًا لاختبار الخريطة. إذا لم يتم تلبية الشرط المحدد، تظهر رسالة تحقق من الصحة في لوحة التكوين تؤكد على أن الخريطة لا تلبي المتطلبات. فيما يلي سلاسل الشروط الصحيحة: time- الخريطة ممكنة زمنيًا edit- التطبيق يحتوي على طبقة واحدة على الأقل قابلة للتحرير featurelayer- لدى الخريطة طبقة معالم واحدة على الأقل filter- الخريطة تحتوي على عامل تصفية تفاعلي مُعرَّف 4x- الخريطة تحتوي على محتوى غير مدعوم حتى الآن في الإصدار 4x من ArcGIS Maps SDK for JavaScript { “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"] }] }
راديو	يقوم بإنشاء زر راديو حيق يمكن تحديد خيار واحد فقط في كل مرة. سيتم تعيين الخيار المحدد ليكون صواب. { "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"
شَرطي	تعرض أو تخفي المحتوى استنادً إلى حالة صواب أو خطأ. على سبيل المثال، إذا تم إلغاء التأشير على خانة اختيار عرض قائمة الطبقات، يتم إخفاء قائمة الطبقات وجميع الخيارات ذات الصلة (على سبيل المثال تضمين الطبقات الفرعية في قائمة الطبقات). { "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
    }
}

إعداد القالب لقراءة معلومات ملف التكوين

لجعل القالب قابلاً للتكوين، يجب على التطبيق قبول مُعرف العنصر لتطبيق تخطيط الويب، مثل قيمة لمعلمة عنوان URL appid. يستخدم الرقم التعريفي لإنشاء طلب غير متزامن لاسترداد خصائص تكوين التطبيق. في ArcGIS Maps SDK 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 صحيح. من أفضل الممارسات تشغيل JSON الخاص بك من خلال المدقق JSONLint لتتأكد من البنية الصحيحة لـ JSON وخلوه من الأخطاء.

5. انقر على حفظ لحفظ إعداداتك.

إذا كنت ترغب في استخدام القالب القابل للتكوين في معرض تطبيق Map Viewer Classic للمؤسسة أو معرض تطبيق المجموعة، قم بمشاركة العنصر مع المجموعة المستخدمة لمعرض التطبيق. بعد ذلك، يمكن لمسؤول مؤسستك تكوين الخريطة أو تكوين المجموعات لاستخدام المجموعة التي تتضمن القالب الخاص بك.