Create a custom template

Help your users create applications that align with the web presence of the rest of your organization by creating custom templates for them to use when configuring apps. These custom templates can specify your organization's values for parameters such as logos, colors, and disclaimers while focusing the configuration experience on only those parameters your users will actually need to change.

Custom templates can be fully hosted in your ArcGIS Online organization, Portal for ArcGIS, or ArcGIS Enterprise which allows you to provide a configuration experience tailored to your organization without losing the benefits of staying fully-hosted in ArcGIS Online and Portal. They can also reference application code that is hosted on another web server.

To create a custom template, first create a new template item that points to either your own app code, or code that is hosted in ArcGIS Online, Portal for ArcGIS, or ArcGIS Enterprise, then modify the configuration settings of that template to suit your organization's needs.

Create a new template

To create a your own template, complete the following steps:

  1. Download the application code from GitHub and extract the zip file.
  2. In the extracted contents, browse to the resources folder and open the configuration-panel.js file in a text editor.
  3. Using a web browser, sign in to your ArcGIS Online organization, Portal for ArcGIS, or ArcGIS Enterprise using a level 2 account.
  4. From the Content page, click Add Item > An application.
  5. The application will be of type Web Mapping, the purpose will be Configurable, and it will use the JavaScript API. Use /apps/CrowdsourceReporter/index.html for the URL and provide a title and tags for your new template. Alternatively, if you are hosting the application on another web server, provide the URL to your application code in the URL space. After providing these details, click Save.
  6. When the details page opens, go to the Settings tab and verify the values of the URL and Purpose parameters. Update them if necessary and click Save.
  7. Copy the contents of the configuration-panel.js file that is open in your text editor into the Configuration Parameters space at the bottom of the page and click Save. This space is only visible for web applications with a type of Configurable.
  8. Share this new template with the group that your organization uses to populate the group templates gallery. This is the gallery of templates that is presented when you click Share on a group page. This group can be defined in the organization or portal settings on the Groups tab under Configurable Apps. If your organization or portal is not using a custom group for this gallery, or if you don't have access to contribute to this group, speak with your organization or portal administrator.

Update default values

Update the default values used in the configuration panel to present your users with values that are relevant to your organization. Alternatively, after setting a default value you can remove that parameter from the configuration panel which will prevent your users from modifying the value of that settings. To edit the default values of your template, complete the following steps:

  1. Open the configuration-panel.js file that was used to create the new template in the previous steps.
  2. Review the top section of values and update those you would like to change. For example, specify the path to an online version of your organization's logo by defining a value for "applicationIcon": "". This will mean that any application created from this template will use your organizations logo, unless another file is specified. The meaning of each of these values is described in the help document for setting the application up on a web server.
  3. The second section of this file defines the structure of the configuration panel. Here you can add or remove fields to add or remove configuration parameters. For example, if you wanted to guarantee that all applications created from the template would use your logo, remove the following code:
          
        {
        "label": "URL to a logo to display in the application header",
        "tooltip": "Logo displays in top left corner of application. Image should be 48px tall.",
        "type": "string",
        "fieldName": "applicationIcon"
        },
      
    
    You can also move parameters around by copying and pasting them where they should appear, and update the labels and tooltips of parameters. The tabs that are found on the configuration panel can be edited by adding and removing the "category" sections.
  4. Copy the contents of the updated configuration panel into a linting program such as JSON Lint to verify that the syntax of the file is correct. Extra or missing commas and parentheses will cause issues later on.
  5. Copy the validated text into the Configuration Parameters space at the bottom of the Settings tab on the details page of the template and click Save. This updated configuration panel will now be presented to anyone who builds or has built an app based on your template.
Top