Configureerbare parameters toevoegen aan templates

Met configureerbare webapptemplates kunnen gebruikers het uiterlijk en het gedrag van een app aanpassen. Een template configureerbaar maken gebeurt in vier stappen:

  1. Als u dit nog niet hebt gedaan, maakt u een webapptemplate.
  2. Maak een configuratiebestand.
  3. Stel de template zo in dat deze de configuratie-eigenschappen kan lezen en pas deze toe op de app.
  4. Koppel het configuratiebestand aan het item voor uw aangepaste template.

Zie de onderstaande secties om aan de slag te gaan.

Een configuratiebestand maken

Het configuratiebestand is een JSON-bestand dat de configuratieopties voor de template definieert. Dit bestand bevat een of meerdere secties die de opties in categorieën opdelen.

De eigenschap fieldName moet uniek zijn binnen de configuratie-instelling.

Maak elke sectie door een categorie en een set met velden op te geven.

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

Geef de configuratieopties op met behulp van de veldtypen die in de tabel onderaan worden weergegeven.

Veldtype

Description

Paragraaf

Geeft de verklarende tekst in het configuratiedialoogvenster weer.

{
       "type": "paragraph",
       "value": "* These menu items will appear in the application when the web map has layers that require them."
}

Tekenreeks

Accepteert de tekstinvoer. Neemt de eigenschap stringFieldOption op die het type tekstvak dat op het scherm wordt weergegeven, opgeeft. Waarden zijn textbox, textarea en richtext. De waarde textbox is de standaardwaarde en is een tekstvak met één regel. De waarde textarea geeft een groter tekstvak voor het invoeren van gegevens weer. De waarde richtext geeft een RTF-editor (Rich Text Editor) weer waarmee gebruikers enige opmaak kunnen toepassen, zoals het instellen van het lettertype van tekst op vet of cursief.

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

Maakt een selectievakje voor het opgeven van de waarden true of false.

{
       "type": "boolean",
       "fieldName": "displaytitle",
       "label": "Show Title",
       "tooltip": ""
 }

Nummer

Maakt een veld dat numerieke waarden accepteert. Als het veld alleen een bepaald waardenbereik mag accepteren, kunt u de instelling voor beperkingen zo instellen dat de invoer wordt beperkt tot een bepaald waardenbereik of dat de invoerwaarden worden opgemaakt. Voor meer informatie over het instellen van beperkingen met Dojo Number TextBox raadpleegt u de Dojo-documentatie.

{ 
     "type": "number",
     "fieldName": "range",
     "label": "Range:",
     "tooltip": "",
     "constraints" :{min:0,max:10,places:0}
}

Opties

Maakt een vervolgkeuzelijst met een aantal keuzes.

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

Voorbeeldconfiguratiebestand

Hieronder vindt u een voorbeeld van een volledig configuratiebestand en het resulterende configuratievenster.

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

Het configuratievenster
Het resulterende configuratievenster voor de voorbeeldcode

De template instellen voor het lezen van de configuratiebestandsgegevens

Als de template configureerbaar zal zijn, moet de app de item-ID voor een webmapapplicatie accepteren als de waarde voor de appid-URL-parameter. Deze ID wordt gebruikt om een asynchrone aanvraag te doen om de configuratie-eigenschappen voor de app op te halen. In ArcGIS API for JavaScript kunt u esri.request gebruiken om de configuratiegegevens van de app op te halen.

In dit voorbeeld wordt esri.arcgis.utils.arcgisUrl omgezet naar 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];
      }
    }, 
});

Het antwoord zal de wijzigingen bevatten die de gebruiker met behulp van het configuratievenster in de app heeft uitgevoerd. U kunt de wijzigingen ophalen en deze op de app toepassen. De app moet standaardwaarden definiëren voor de configuratieopties om situaties af te handelen waarbij de template niet is geconfigureerd.

{
    "source": "15a34e2c161b4364860854fbc84262c5",
    "folderId": "5705faa4594a4fd09edf01742c16e523",
    "values": {
        "webmap": "32f1438789d34b5e8125f0f7c64b8d63",
        "layer":"http://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer/2",
        "theme": "green",
        "orgname": "Water Points",
        "bufferdistance": 3
       }
 }

De gegevens van het configuratiebestand koppelen aan het item voor uw aangepaste template

Nadat u uw configuratiebestand hebt gemaakt, bent u klaar om dit te koppelen aan uw aangepaste template en de app configureerbaar te maken. Als u dat nog niet hebt gedaan, moet u de template toevoegen als een nieuw appitem in ArcGIS Online. Vervolgens opent u de pagina met details van uw app, klikt u op de knop Bewerken en kopieert en plakt u de JSON-code van uw configuratiebestand naar het vak Configuratieparameters onder aan de pagina met itemdetails.

Pagina met itemdetails met veld Configuratieparameters
Maak uw template configureerbaar door de gegevens van het configuratiebestand toe te voegen aan het veld Configuratieparameters van de itemdetails van de template.

Een sectie met configuratieparameters is nu beschikbaar in de modus Bewerken van het webappitem.

OpmerkingOpmerking:

Het veld Configuratieparameters vereist een geldige JSON. U doet er goed aan uw JSON uit te voeren via een validator zoals JSONLint om ervoor te zorgen dat u over een correct geconfigureerde, foutloze JSON beschikt.

Als u de configureerbare template in de galerij met webtemplates of de galerij met groepstemplates van uw organisatie wilt gebruiken, deelt u het item met de groep die wordt gebruikt voor de templates. Vervolgens kan de beheerder van uw organisatie de map viewer configureren of groepen configureren om de groep te gebruiken die uw template bevat.

2/14/2014