Skip navigation
All Places > AppStudio for ArcGIS > Blog > Author: TJin-esristaff
1 2 3 Previous Next

AppStudio for ArcGIS

36 Posts authored by: TJin-esristaff Employee

Trying to build an app that has an easy to use address finder functionality? Look no further, we are excited to release a brand new beautiful, intuitive and ready-to-use geocoding sample app built with latest ArcGIS Runtime 100.1 and following Google's Material Design guidelines. The source code of this sample is available both in the AppStudio Desktop as well as online at arcgis-appstudio-samples GitHub repo.  

 

  • You can directly download and run the sample app on your AppStudio Desktop, AppStudio Player, or even build an app on any supported platform.  
  • Check out the code of the sample app and use it to your own amazing AppStudio app
  • It's also a great resource to learn more about QML, building beautiful interfaces using Material Design, AppFramework, and ArcGIS Runtime concepts.  

 

Few features and highlights of the sample:

 

When you type an address or a point of interest, a list of suggestions based on the input address will show up, which provides you with a better geocoding experience.  As you can see, when typing 380, the search returns all of the possible results containing 380.  This auto-complete function not only avoids user provide invalid address but also saves time typing out an entire address.                        

        

 

 

This geocoding sample app does more than just search for places. We improved the geo-searching experience by sorting search results based on the direction and how far they are from the user’s current location. A campus icon and the distance will be displayed at the beginning of the returned address. As I search for Starbucks, the results that I got are sorted by distance, which is extremely helpful for me to choose the closest Starbucks on the way back home.

            

     

AppStudio for ArcGIS 2.0 now supports ArcGIS Runtime Version 100.1, which means many features such as 3D scenes, raster data, mobile map packages, and vector tiles can be used in your mapping applications. This geocoding sample app takes advantage of new runtime capabilities and uses the World Street Map, which is a vector tile layer as the basemap. The vector tile layer delivers a high-resolution display across devices. It also performs faster than raster tiles due to the fact that it has a smaller file size. The vector tile layer provides unique capabilities for customization, such as changing its label fonts, symbology, content, and more.

 

           

 

Can't wait? Let's get started:

 

  1. Download AppStudio Desktop Edition from here (if you have not already)
  2. Click on the New App button
  3. Search for the Geocoding sample app
  4. Choose the Geocoding sample app and click Create
  5. Now you can run the app and also upload it to your org and use the Player to play it in your own device of choice.
  6. If you want to learn more about the code, click the 'Edit' icon on the side panel to view and edit source code

 

               

 

 

When you open the app project from Qt Creator.  The first folder, “controls” contains four files, which are used to complete the user interface. Each file is a customized control component, which can be reused by calling the filename. For example, the MapRoundButton.qml file includes the snippets of QML code that defines a round button interface; it is used three times for three round buttons on the right of the map. To load a component:

  1. Import a component. In this case, we use import "../controls" statement
  2. Load a component by calling the QML filename.                                                                                                     Note that in the MapArea.qml file, the MapRoundButton component matches the QML filename.

            

 

The second folder, “images,” contains all of the system icon images for the Geocoding app. You will find the most important source code from the third folder; “views.” The GeocodeView.qml includes QML code that implements the geocoding function.  Take a look at imports; you might notice the import Esri.ArcGISRuntime 100.1 statement. ArcGISRuntime SDK integrates mapping and GIS capabilities and empowers this geocoding sample app. Geocoding is implemented with the LocatorTask class. You can pass an online locator URL or create an offline locator and pass the file path to the LocatorTask. ArcGIS Online World Geocoding service is used in this sample. You will be able to find the LocatorTask class from the GeocodeView.qml file (line 285).

LocatorTask {
    id: locatorTask
    url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
}

 

The MapArea.qml file includes the QML code that imports the base map, complete action button interface, and the button's 'click' functionality, as well as drawing a pinpoint of the reach results on the map.

 

And that was a quick look at the structure and code of the geocoding sample app.  I hope you find it helpful to implement geocoding functionality to your own amazing native apps.  More exciting sample apps will roll out soon!   

We are excited to announce the release of the AppStudio for ArcGIS version 2.0. AppStudio has gone through a major overhaul that includes new features, capabilities, framework enhancements and a fresh new interface. This release is focused towards adding value to our users and improving your app development experience. The AppStudio product has come a long way since launching  2 years ago, with great feedback from our users, we are committed to making this platform more efficient and user-friendly.

 

Following are the highlights of this release:

  • AppStudio now supports the latest ArcGIS Runtime 100.1
  • AppStudio desktop has a redesigned interface with light and dark themes
  • New native capabilities - Local Notification, Vibration & Background location
  • New utility plugins - SQL Storage and Promises
  • Map Tour template has a new landscape view and supports new runtime 
  • Map Viewer template has been redesigned from the ground up
  • Quick Report template works completely offline and supports new runtime
  • AppStudio Website has a new Showcase Gallery
  • AppStudio Framework API and guide documentation is now available online

 

You can now get the brand-new version of AppStudio for ArcGIS at http://appstudio.arcgis.com.  Don’t forget to update the mobile companion app AppStudio Player from iTunes and Google Play store.

 

AppStudio Desktop:

Our team has completely re-designed the AppStudio desktop with new UX, a new set of system icons, layout, and

theme color to help improve your overall experience and make you more productive. With this updates, AppStudio Desktop supports ArcGIS Runtime Version 100.1 now.  There are also many new features and enhancements introduced in this release such as better search functionality, better create "New App" experience and background location support. Please see this blog post for more details.  

 

AppStudio Website:

1. New Showcase Gallery

A new Showcase Gallery has been added to the AppStudio Website. You will be able to discover many cool apps built with AppStudio and it might even inspire you with new ideas for your mobile app project. If you want your app to be included get in touch via Twitter or geonet community.

 

2. Creating Quick Report Using Polyline and Polygon Feature Layers

Previously, only point features were supported while using the AppStudio Website to create an app with the Quick Report template.  With this new release, point, polyline, and polygon are all supported. 

 

AppStudio Framework:

There are a new set of plugins added to the AppFramework, which offer native capability across all platforms supported by AppStudio.  These new plugins are:

  • Notifications Plugin (Beta)
  • Local Notifications Plugin (Beta)
  • SQL Plugin (Beta)
  • Promises Plugin (Beta)
  • Vibration (Beta)

 

For more information about new plugins, please check this blog post.

 

Note: These plugins are currently in beta and we appreciate any feedback from our users.

 

AppStudio Player:

AppStudio Player now supports two versions of the ArcGIS Runtime side by side. You can switch between the runtimes for you new or existing apps with the new settings interface. You will also find other enhancements to support Material and Universal design. Many other minor UI enhancements, new features, and bug fixes are all part of the latest release of Player, it is available to download in the app stores or for your desktop, please see this blog post for more details.

 

AppStudio Template:

ArcGIS Runtime Version 100.1 is supported by all of the AppStudio templates now. (Map Tour, Map Viewer, Quick Report).  Map Tour template has a new landscape view, Map Viewer has been re-designed from the ground up, and Quick Report works completely offline with the support of Mobile map package.  Please see this blog post for more details about the new features and enhancements of the AppStudio templates. 

 

AppStudio Framework API Documentation:

AppStudio Framework API Guide and API reference documentation have improved greatly with many code snippets and new documentation on the AppStudio AppFramework. The AppFramework API documentation is now available online.  You can also press F1 to display the full help documentation in the Qt creator.

 

Licensing:

AppStudio for ArcGIS Basic is included as part of your ArcGIS Subscription (Level 2), you can create and publish apps with the Map Tour, Map Viewer, and Quick Report templates. AppStudio for ArcGIS Standard gives you a suite of developer productivity tools, and enables you to extend the templates, use samples and create custom apps from scratch.With Standard, you can also upload apps to an ArcGIS Organization and collaborate on apps with other team members.

 

New at this release: AppStudio for ArcGIS standard license is now included in the ArcGIS Developer Subscription – Builder level and above. If you are an existing user and already have purchased AppStudio Standard license then it will continue to work until its valid. If you are planning to buy new then it will be bundled with the developer subscription at builder level and above. We believe that this will open up AppStudio to more developers and enthusiasts to create awesome applications. You can also sign-up for an ArcGIS trial account to get a 21-day trial of AppStudio Standard.

 

Our team intends to make improvements and enhancements continuously to help you create beautiful apps. We hope you enjoy these new features and upgrades. 

 

                                   Follow us on Twitter @appstudioarcgis for latest updates and news

 

List of support issues addressed

 

BUG-000095218

Symbology issue with applications created using the Story Map Tour template in the AppStudio for ArcGIS website is resolved.

BUG-000095405

Incorrectly formatted word "Display" in Settings is corrected

BUG-000099383

The Map Viewer template in AppStudio for ArcGIS now shows the default extent when opened on Android and iOS devices

BUG-000101053

Missing checkboxes in App Studio Make tool from AppStudio for ArcGIS Desktop on Arabic Mac OSX is corrected.

BUG-000101597

Security vulnerability with iOS applications created with AppStudio for ArcGIS is resolved.

BUG-000101602

iOS apps developed with AppStudio for ArcGIS are now getting compiled using the default iOS memory management framework.

BUG-000101822

The AppStudio for ArcGIS Map Viewer crash issue with time enabled layer is resolved.

BUG-000101978

Security vulnerability with Android applications created with AppStudio for ArcGIS is fixed.

BUG-000102326

The issue with Map Scale settings of AppStudio for ArcGIS Map Tour not being honored when set in AppStudio for ArcGIS Desktop no longer exists.

BUG-000102917

An AppStudio for ArcGIS application created with the Map Viewer template shows numeric coded values rather than associated domain values.

BUG-000103139

A Map Tour template app in AppStudio for ArcGIS is able to retrieve an image that is successfully accessed when the same image is referenced in a Story Map Tour application in ArcGIS Online.

BUG-000103313

The OpenStreetMap basemap displays in an AppStudio Player for ArcGIS app that is created using the AppStudio for ArcGIS Map Viewer template.

 

AppStudio for ArcGIS Desktop version 2.0 is getting a brand-new look.  The new design of AppStudio for ArcGIS Desktop provides a beautiful and consistent interface and simple user experience.  Many new features and enhancements were introduced to the AppStudio Desktop and changes include the following:

 

ArcGIS Runtime Version 100.1 support

One of the most exciting enhancements is the support for new ArcGIS Runtime. With the new runtime, you can leverage 3D scenes, Raster data, Mobile Map Packages, Vector Tiles, and more in AppStudio apps. However, we did not forget about your existing apps, in fact, we went a step further by supporting both runtimes side by side (Yes that's right, both your existing apps using 10.2.6 runtime and the new ones using 100.1 will run, compile, play and build side by side).

 

Brand-New Interface

AppStudio for ArcGIS 2.0 Desktop has a cool new interface tailored to improve your app development experience and efficiency. The simplified menu bar enables you open Console to debug apps, launch virtual devices, refresh gallery, create a new app, and set preferences.  The user interface is also customizable with the choice of light and dark themes, normal and large card sizes, and ability position side panel to the left and right.  The new side panel gives you quick access to the tools you use most.  Two new tools included in the side panel are the “Open Online Item” and a QR code generator so you can quickly download an app to a device running AppStudio Player.

 

             Note: The new design for Console, Settings, and Make will be available in the following release.

 

              

 

 

 

Better Search Functionality

Searching apps in the gallery just got easier.  AppStudio 2.0 features powerful search functionality that can help you find any app easily.  Not only can you use #tag search for apps tagged with a term or @username for apps created by a specific user, but you can also filter apps based on the app ownership, location, and status.

 

 

               

 

 

Enhanced Create “New App” Experience

We have completely redesigned the "New App" dialog to provide you an easier experience to create apps.  You can also now search for samples and templates apps in the “New App” dialog. 

 

 

                 

 

 

 

New Samples

With the support of new ArcGIS Runtime, we have updated more than 40 high-quality samples to help you build custom apps. These samples demonstrate core runtime features such as 3D scene, feature layers, offline map, portal, along with samples for native capabilities. To use or view our samples you can click on the “New App” button,  select Samples category, and choose the sample that you want.  You can also access these samples online at AppStudio Samples GitHub.

 

 

                  

 

 

New Controls

Qt introduced new controls which include Material and Universal style. The Material Style follows Google Material Design Guidelines whereas Universal Style is based on Microsoft Universal Design Guidelines. AppStudio now supports these controls to help you create visually appealing apps. 

 

Beta Features

AppStudio has introduced few new capabilities as beta features such as:

 

  • Local Notification
  • Vibration
  • Background Location
  • Promises
  • SQL Storage

 

You can learn more about them by reading this blog post.

This new release brings out many exciting new features and enhancements to AppStudio for ArcGIS Templates.  For example, Map Viewer Template has been redesigned from the ground up and Quick Report Template works completely offline with the support of Mobile map package.  Let's take a look at these new features.  

 

Map Tour Template:

 

New ArcGIS Runtime

Map Tour template now built using the latest ArcGIS Runtime 100.1 (a.k.a Quartz) for mapping capabilities. This opens up all the new and improved capabilities that the new runtime has to offer such as 3d, vector map tiles, support for webmaps v2.0 and above, better rendering and labelling support to name a few.

 

New Landscape View

Map Tour template has a new design for the landscape view.  You will be able to see the images and map at the same time on the large screen.

 

 

 

Support for the HTML <audio> Tag

Many users like to add HTML <audio> tag into story maps.  We don't want you to miss out such great functionality to enhance the storytelling experience.  Starting from AppStudio v2.0 Map Tour template, if your tour point has audio in the description you will be able to play audio inline within the app.                  

                       

 

 

 

Map Viewer Template:

 

New ArcGIS Runtime

Map Viewer template now built using the latest ArcGIS Runtime 100.1 (a.k.a Quartz) for mapping capabilities. This opens up all the new and improved capabilities that the new runtime has to offer such as 3d, vector map tiles, support for webmaps v2.0 and above, better rendering and labelling support to name a few.

 

New Interface

This update brings a clean and intuitive new interface using the Material design controls. The new and improved Map Viewer Template provides an immersive and adaptive display for all screen sizes and tailored for better user experience.

 

New functionalities

The following is a list of new features that were added in this release.  

  • Pop-up support (includes attachment and media)
  • Geosearching (within and outside the extent of the map)
  • Feature search (if your webmap support search for layers)
  • Bookmarks
  • Switching base maps
  • Changing Map Units
  • Secured layers (provides a way for user to sign in to unlock)
  • Premium layers (provides a way for user to sign in to unlock)
  • Support for OpenStreetMap, Bing, Image, Web Tiles layers

 

 

 

                                      

 

Quick Report Template:

 

Settings Enhancements

Includes custom settings to change the font size and switch to dark mode.  The new Reset Button brings you back to the default app settings and deletes all of the saved drafts and offline maps. You can also sign out from your current logged-in account with the Sign Out button.

 

 

                            

 

New ArcGIS Runtime

Quick Report template now uses the latest ArcGIS Runtime 100.1 (a.k.a Quartz) for mapping capabilities. This opens up all the new and improved capabilities that the new runtime has to offer such as 3d, offline map packages (mmpk), vector map tiles, support for webmaps v2.0 and above, better rendering and labelling support to name a few.

 

Fully offline

Starting from AppStudio for ArcGIS version 2.0, you can download the Mobile map package (MMPK) for offline use. With the support for MMPK, the Quick Report Template now works fully offline. 

 

 

                        

 

 

Camera Improvements

This release offers a range of great features that will improve your experience while using the camera in the Quick Report.  New features and enhancements include:

 

  • Adding a zoom in/out slider
  • Switching between front and back cameras
  • Adding EXIF info to images
  • Implementing red eye reduction
  • Continuous focus

 

                                   

Map Page enhancements

The following are a set of enhancements added to the map page:

  • Geosearching
  • Full-screen map

 

               

 

 

Saved Draft page enhancements

Now, you can sort saved drafts based on the Date/Time to help you identify the draft.

         

 

               

 

 

New Submit Button on draft report page

In the last version of Quick Report, you had to navigate to the last page to submit a draft, even if you only need to modify report information on the first page. And as a user productivity enhancement, the submit Submit Button is included on every page while editing a saved draft.

 

 

 

            

AppStudio Player for ArcGIS allows you to test your app on a device quickly.  AppStudio Player version 2.0 is now available on iTunes and Google Play stores. Here is an introduction of new features and enhancements.   

 

Settings Enhancements:

AppStudio Player now supports two versions of the ArcGIS Runtime and new style controls. Hence, we have introduced a new settings interface that allows you to switch between ArcGIS Runtime 100.1 and 10.2.6 and set up your app style (Default, Material style, and Universal style).  We also provided an option to turn on or off auto refreshing of apps in the Settings interface.

 

                     

 

 

 

 

Side Tab Enhancements:

The side tab allows you navigate from your current app to Gallery. We have provided the ability to reposition this side tab by simply dragging around the screen.  You will notice that a Reload button is on the side tab, this button allows you download the latest version of the app without closing it. Moreover, you can completely hide the side tab and take nice screenshots of your app. 

 

 

                         . 

 

 

 

 

 

Search and Download Public Apps:

AppStudio Player Version 2.0 provides the ability to search and download apps shared with you,  shared within an organization and shared publicly.

 

 

                         

                                  

This blog post was contributed by Jinnan Zhang of Esri Living Atlas Team. Download his latest AppStudio app Ecological Marine Unit (EMU) at App Store or Google Play

 

The core of user experience (UX) and user interface (UI) design is all about communication. Using icons is a very effective way to communicate with users. Icons can help users absorb and process the meaning or purpose of a design element almost instantly and can transcend language barriers. Icons can also serve as paragraph breaks that visually separate content to make it more interesting and readable. Icons save valuable screen space, and when it comes to the mobile apps, this is essential.

Traditionally, icons were graphics that needed to be designed, cropped, optimized, styled and loaded by the user. Font libraries are a modern method of incorporating icons into your app. They are just fonts that contain symbols and glyphs instead of letters and numbers, this means you can style them in the same way you style regular text.  This made them increasingly popular with developers and designers.

This post shows you how to incorporate font based icons into your AppStudio for ArcGIS project using Font Awesome -- one of the most popular icon font libraries.

 

Why use Font Awesome?

In case you are not familiar with Font Awesome - it is a large icon set designed for Bootstrap; it provides you scalable vector icons (for free) that can instantly be customized - size, color, drop shadow, etc.

Font Awesome is powerful because the icons it provides are...

  1. Easy to style. How would you go about changing the color of an image icon? Not very easy, right? However, with Font Awesome, you change the color of an icon just like you would change the color of a regular text element.
  2. Scalable. An icon’s size can be changed instantly and since they are scalable vectors, they look great at any size and screen resolution.
  3. Retina ready. Font Awesome renders your icons as sharp as your device allows so you do not need to worry about creating icons for high-resolution retina displays.
  4. Popular. The icons you use should be widely understood and recognized, otherwise, they will probably fail to communicate effectively. Font Awesome is probably the most popular icon font out there and it is the 11th most popular project on GitHub now...

 

How to use Font Awesome?

Here are the steps of how to use Font Awesome in your AppStudio for ArcGIS App, 

  1. Download the Font Awesome package from Font-Awesome website, unzip it and add the “fontawesome-webfont.ttf” file to the assets folder of the project.
  2. Load the “fontawesome-webfont.ttf” file to your app project. 
      FontLoader {
            id: fontAwesome
            source: app.folder.fileUrl("assets/fontawesome-webfont.ttf")
        }
        
  3. Using the Font Awesome Cheatsheet page to locate the Unicode string for the icon that you want to use. In this case, we will choose a home icon (Unicode string: “f015”).  Now, we can add the home icon to the app by simply creating a QML Text element.  Note that font family needs to be set as the Font Awesome font family name and the text property is the icon Unicode string.   
            Text {
                id:homeIcon
                font.family: fontAwesome.name
                text: "\uf015"
                font.pixelSize: 35
                anchors.horizontalCenter: parent.horizontalCenter
            }
  4. Now we will add a text label under the home icon to make it looks like this:

                                                                                   

            Text{
                text:qsTr("Home")
                anchors.top:homeIcon.bottom
                font.pixelSize: 15
                anchors.horizontalCenter: parent.horizontalCenter       
            }

     

  5. If you plan to use an icon multiple times, you might consider using a user-friendly name instead of the Unicode string. To do this, assign the Unicode string to a read-only property in your app then use it for the Text Element’s text property:       

  1. readonly property string ft_home: "\uf015"

        Text {
            id:homeIcon
            font.family: fontAwesome.name
            text: ft_home
            font.pixelSize: 35
            anchors.horizontalCenter: parent.horizontalCenter
        }

 

And we are done!  It is that simple to add custom icons into your app that scales and looks exactly the way you want to design your app.

To help you get started, here is a sample AppStudio app available on GitHub that uses Font Awesome icons in many different ways (Eg. buttons, links, icons).  Check out the source and add it to your own AppStudio app.  

                                                    

      Now it is your turn to create awesome AppStudio apps using Font Awesome Icons!

 

AppStudio for ArcGIS