Create a 311 app with no coding required
The following steps outline how to create an app from a configurable template. In this lesson, you will use and tailor a template to generate a 311 app for the City of Cilantro.
- Choose a template.
- Change settings.
- Test on devices.
- Generate installation files.
- Publish to your preferred store.
Note:
311 is a nonemergency phone number supported in many communities in the United States and Canada. Citizens can call this number to access a variety of city services, make complaints, or report nonemergency community concerns such as abandoned vehicles, graffiti, or road damage. Around the world, local authorities provide the same service to their citizens, but often without a standardized number.
Create an app
The City of Cilantro has provided you with a feature layer containing a point and a polyline layer representing Cilantro 311 city services. You’ll use the AppStudio Quick Report template to create a cross-platform mobile app.
Note:
The Quick Report template is ideal when you want to create a data collection app. It allows you to capture an observation and submit it to an online layer. You can add your branding with icons, colors, and splash screen images. Many cities have created 311 mobile apps based on the Quick Report template.
To start, if necessary, you'll download and install AppStudio and some Cilantro city logos and icons. Then, you'll create an app using the Quick Report template.
- Download the Cilantro-City-Branding zip file.
- Extract the contents of Cilantro-City-Branding.zip to a location of your choice (for example, C:\Cilantro-City).
- Open AppStudio.
Note:
If you don't have AppStudio, you can download it for free from the ArcGIS AppStudio Resources page. Once downloaded, click the file to initiate the installation wizard. Follow the wizard instructions to install the application.
- On the AppStudio application ribbon, click Sign In.
- In the Sign In pane, select Sign In.
- Sign in to your ArcGIS organizational account or into ArcGIS Enterprise using a named user account.
Note:
If you don't have an organizational account, see options for software access.
- In the AppStudio application, click New App.
The New App window appears and presents various out-of-the-box app templates organized under tabs along a ribbon.
- In the New App window, click the Templates tab and choose the Quick Report template.
Note:
Template names can display a version number as part of the name. In addition, when you select a template, a summary and description describing a use case and template settings are displayed on the right side of the window.
- On the side pane, click the Create button.
A new Quick Report app is created using the template. It is added to the list of available apps. Apps created by other members of your organization may appear. However, if this is your first time using AppStudio, it is your only app. With your new app selected, review the side pane, which provides additional information about the app.
- In the list of apps, click your new Quick Report app to select it, if necessary. In the side pane, click the Edit Title button.
- For Title, type Cilantro 311, and click the Save Changes button to update the app title.
Customize your app
Your Cilantro 311 app's design should clearly represent your organization as well as the app's use and functionality. To increase the visual appeal and informative value of your app, you'll next modify the appearance by adding descriptions, city colors, logos, and branding.
- In the list of apps, confirm your Cilantro 311 app is selected and click the Settings button in the side pane.
The AppStudio Settings window appears. Reposition the window as needed. Do not close your parent AppStudio application window.
In the AppStudio Settings window, you'll change and update the application thumbnail.
- In the Details pane, click the icon representing the app thumbnail image.
A browser window appears.
- In the browser window, browse to the folder containing your extracted Cilantro-City-Branding content. Double-click the thumbnail-cilantro311 image.
- A dialog box appears, explaining that a copy of this image will replace the current thumbnail. Click Yes to acknowledge the replacement.
The Details pane updates the Cilantro 311 app thumbnail with the city logo.
- In the Details pane, for Summary, type Report issues to the city easily and quickly.
- For Description, type This app allows citizens to easily and quickly request non-urgent community 311 services such as graffiti removal, streetlight repair, and tree maintenance, and more to the City of Cilantro.
Next, you'll add an icon to identify and brand the app on smartphones and other devices where it is likely to be deployed.
- In the AppStudio Settings window, click the Resources tab.
- In the Resources pane, for App Icon, click the image.
- In the browser window, locate the folder containing your extracted Cilantro-City-Branding content. Double-click the Icon-cilantro311 image.
- In the message window, click Yes to copy the image file to the app project folder.
The icon is updated. Next, you will add a background image.
- In the AppStudio Settings window, click the Properties tab.
The QuickReport Properties pane appears.
- Locate and review the Start Screen, Form, Colors, and Other Properties tabs in the pane.
- On the Start Screen tab, for Background image, click the default (Forest Fire) background image.
- In the browser window, locate the folder containing your extracted Cilantro-City-Branding content. Double-click the background-cilantro311 image.
- If you receive a message asking if you want to copy the image to the app's folder, click Yes.
In the QuickReport Properties pane, the start screen background image updates to reflect the updated branding for the cilantro 311 app.
- On the Start Screen tab, scroll and locate the Show logo property, and click the Show Logo button to turn off the logo.
- On your own, you may want to update the footer links and add a phone number, website details, and additional contact details such as an email address.
- At the bottom of the AppStudio Settings window, click Apply to save changes.
A green message box confirms your settings have been applied.
The City of Cilantro has provided you with a feature layer containing a point and a polyline layer representing Cilantro 311 city services. Next, you will add the feature layer to the app.
Add data
Since the City of Cilantro has provided you with a feature layer that will be used in the 311 mobile app to collect information, you will not need to create a new feature layer. The feature layer—and more specifically, the template used in the design and creation of the feature layer—is important because it is used by the Quick Report app to build selections and choices used by citizens to report and submit nonemergency community 311 requests.
- In the QuickReport Properties pane, locate and click the Form tab.
Note:
Feature services, more commonly referred to as feature layers, allow organizations to serve features over the internet and provide specific symbology to use when displaying the features. In addition, they provide a template that can be used for an enhanced editing experience where users can execute queries to locate and update existing features and add new features. All updates are applied to the server and made available to users of the feature layer.
- In the Form pane, locate and review the Feature service address property.
Note:
Your Quick Report app will use the feature layer and its layers and settings as a template for building the app reporting details. For example, you may have a streets feature layer used to collect street sign information in your neighborhood. Each street sign feature, existing or captured new by you and stored in the layer, may include attributes allowing you to update and capture the sign condition, include a picture of the sign, and report a complaint related to the street sign.
- In the Feature service address property, replace the default address with the following URL:
https://services2.arcgis.com/j80Jz20at6Bi0thr/arcgis/rest/services/Cilantro/FeatureServer
Note:
To find a hosted feature service address, open the hosted feature layer item in ArcGIS Online or ArcGIS Enterprise. Scroll down to the URL section and click the Copy button to copy the address.
- For Layer IDs of the feature service, type 0,1.
The City of Cilantro feature layer IDs identify the following:
- 0 to represent point features to collect graffiti, streetlight, litter, or sign issues
- 1 to represent polylines to collect street or sidewalk issues
A feature service, or feature layer, can consist of multiple layers that make up the service. When referencing specific layers in an app, you need to input the layer IDs to identify which layers your app will access and use. Layer IDs begin numbering from 0, so if your feature layer consists of five layers and you use three layers, your layer ID list may be 0,3,4, denoting that you are referencing the first, fourth, and fifth layers in the service.
Note:
You can review and identify feature service layer IDs in the ArcGIS REST Services Directory together with the layer name and feature type (point, polyline, or polygon).
Next, you will finalize the app branding before generating an installation file.
Add branding color
Change and update the app color to match the colors used in the logo and icons for your 311 mobile app.
- In the QuickReport Properties pane, click the Colors tab.
- For Header background color, type #f15a24 and press Enter. For Button color, for the color hex code, type #f15a24 and press Enter.
- At the bottom of the AppStudio Settings window, click Apply.
A green message box confirms your settings have been applied.
Next, you'll set a license for ArcGIS Runtime. Apps that are not licensed display a watermarked map. For this app you will select a no-charge Lite license.
- In the AppStudio Settings window, in the left pane, locate and select the Licensing tab.
- In the Licensing pane, under ArcGIS Runtime Licensing, for License Key, click Set Lite license.
The License key dialog box updates and displays a valid license key token.
- At the bottom of the AppStudio Settings window, click Apply, and then close the window.
Test your app
Next, you'll test your app. First, you'll test it in the desktop application. Then, you can optionally test it on a mobile device.
- In the AppStudio window, confirm the Cilantro 311 app is selected.
- In the side pane, click Run.
- The Cilantro 311 app opens in a new window.
- On your own, test the Cilantro 311 app functionality.
- Click New and generate a new report for an abandoned vehicle, new graffiti, or road damage.
- Use the Next button to explore the various app options.
- In the Add Location pane, move the map to refine the location for the report.
- When you are done, close the app.
Next, you can upload and share the app with the community.
- In the AppStudio window, confirm your Cilantro 311 app is selected and click the Upload button.
- In the AppStudio Upload window, for Sharing options, click My organization and click the + Upload button.
A green Upload successful message confirms your app has successfully been uploaded and can now be downloaded and installed by members of the community.
- Close the AppStudio Upload window.
Next, you may choose to install AppStudio Player on a mobile device or test the app on your desktop by installing a desktop version of AppStudio Player. The following steps illustrate a desktop installation followed by optional steps for mobile devices.
Note:
If you don't have AppStudio Player installed on your desktop, download it from the ArcGIS AppStudio Resources page. Once downloaded, click the file to initiate the installation wizard. Follow the wizard instructions to install the application.
To install AppStudio Player on a mobile device, download it for free from the Microsoft Store, Google Play, or the App Store. On your mobile device, complete installation as directed.
- On your desktop or mobile device, launch AppStudio Player. Click Sign In and sign in to your ArcGIS account, and then select your Cilantro 311 app.
Note:
In AppStudio Player, you can sign in with either an ArcGIS Online or ArcGIS Enterprise account.
- In AppStudio Player, download your app and test the app by adding a new report and collecting a point or line to identify the report location.
Using ArcGIS AppStudio Developer Edition, developers can create an app installation file that allows the app to be published to a store. The following optional section illustrates the steps to do this.
Create app installation files (optional)
If you have an ArcGIS AppStudio Developer Edition license (available by purchasing an ArcGIS Developer Subscription Builder level and higher), you can create app installation files. In this section, you will create an app installation .apk file for Android and .exe file for Windows.
Note:
You will need an Apple Developer license for creating an app installation .ipa file for iOS devices.
- In AppStudio, on the side panel, click Settings.
- In the AppStudio Settings window, click Platforms > Android. For Package Name, provide a name such as com.companyname.myapp.
Note:
Package naming follows a convention where your organization or company name is included within a standard package name.
- Click Apply.
- Close the AppStudio Settings window.
- In AppStudio, confirm that the app is selected, and in the side pane, click Make.
The Make window appears.
- For Cloud Make, click Select.
- In the Cloud Make configuration window, for Select target platform(s), in the Android column, check the box for ARMv8 (64 bit), and in the Windows column, check the box for 64 bit.
- Click Analyze Build and click Request Build.
The Build Status window appears.
It takes a few minutes for the AppStudio cloud service to create app installation files. Once the build request is complete, you receive an email with the download and installation instructions.
- In the Build Status window, click https://appstudio-ota.arcgis.com/ and sign in with your ArcGIS account.
Note:
Optionally, you can scan the QR code for the installation files from the app console page at https://appstudio.arcgis.com/.
- Click Install and download and install the apps on your device.
In this lesson, you used ArcGIS AppStudio together with a ready-to-use configurable template to help you create and deploy a mobile app for the City of Cilantro where citizens can submit non-emergency community 311 requests such as graffiti removal, streetlight repair, and tree maintenance. Developing this app, which can run on multiple platforms, did not require writing any code, and the app can be shared within your organization or with the public. Optional steps illustrated how to install AppStudio Player on various mobile platforms and how to create an app installation file.
For more information, review the following:
