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

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

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 API 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    }
}

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

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

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

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