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

تسمح تطبيقات الويب التي يُمكن تكوينها للمستخدمين تخصيص مظهر التطبيق وسلوكه. تتكون عملية إنشاء التطبيق الذي يُمكن تكوينه من 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" }
منطقي	يقوم بإنشاء خانة اختيار لتحديد 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" }] }
منتقى الألوان	يعرض منتقى اللون الذي يتيح للمستخدمين اختيار الألوان من اللوحة أو تحديد قيم hex، أو 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" ] } }
راديو	يقوم بإنشاء زر راديو حيق يمكن تحديد خيار واحد فقط في كل مرة. سيتم تعيين الخيار المحدد ليكون صواب. { "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” }
شَرطي	تعرض أو تخفي المحتوى استنادً إلى حالة صواب أو خطأ. على سبيل المثال، إذا تم إلغاء التأشير على عرض قائمة الطبقة ، يتم إخفاء قائمة الطبقة وجميع الخيارات ذات الصلة (على سبيل المثال تشمل الطبقات الفرعية في قائمة الطبقة). { "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    }
}

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

إذا أصبح القالب قابل للتكوين، سيحتاج التطبيق إلى قبول مُعرف العنصر لتطبيق تعيين الويب مثل القيمة 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       }
 }

اقتران معلومات ملف التكوين مع عنصر قالب التطبيق

بعد قيامك بإنشاء ملف التكوين، ستكون مستعد لجعله مقترن مع قالب التطبيق المخصص وجعل التطبيق قابل للتكوين. أولاً، إذا لم تقم بذلك بالفعل، أضف القالب في صورة عنصر تطبيق جديد وتعيين الغرض إلى قابل للتكوين. بعد ذلك افتح صفحة العنصر الخاصة بالتطبيق، وانقر على علامة تبويب إعدادات ، وانسخ كود JSON من ملف التكوين، والصقه في مربع معلمات التكوين.

ملاحظة:‏

يتطلب حقل معلمات التكوين وجود JSON صحيح. من أفضل الممارسات تشغيل JSON الخاص بك من خلال المدقق JSONLint لتتأكد من البنية الصحيحة لـ JSON وخلوه من الأخطاء.

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