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

ArcGIS AppStudio

39 Posts authored by: TJin-esristaff Employee

We are excited to announce the release of the AppStudio for ArcGIS 2.1. This release brings a lot of new features, enhancements, and bug fixes, all to improve your app development experience and to provide more functionality to implement into your apps.

 

Highlights of 2.1 are as follows:

 

  • New community panel added to Desktop
  • UI/UX improvements for AppStudio Desktop tools
  • New Material Design layouts
  • Map Viewer template supports secured Web Maps and offline map packages (MMPK)
  • Quick Report template supports audio and video attachments
  • AppStudio Player improvements - Biometric, IWA authentication  
  • New Plugins in AppFramework – Biometric Authentication, Secure Storage, High Accuracy GPS, and Inter-app share
  • Support for non-runtime apps to run on Windows Universal Platform (Beta)
  • Underlying Qt framework has been upgraded from 5.8 to 5.9.1

 

You can get the latest version of AppStudio for ArcGIS at AppStudio for ArcGIS | ArcGIS.  Don’t forget to update the mobile companion app AppStudio Player on your device from iTunes and Google Play store.

 

AppStudio Desktop

In this release, we continue our work on improving UI /UX for AppStudio Desktop tools. Many new features and handy improvements for Desktop are also included, such as Material Design layouts, a new community panel in the Desktop Gallery, support for building UWP apps using cloud Make tool, ability to delete apps both locally and in the organization, ability to share apps directly from the Desktop, easily generate client ID and many many more. Watch out for a detailed blog post to learn more about all the new big and small changes to the AppStudio Desktop very soon.    

 

 

AppStudio Player

With 2.1, on iOS (MacOS and Windows) devices, you can now login more securely using the newly added biometric authentication functionality (Touch ID). You can enable this feature in the Player Settings

Note:Support for Android device will be coming in the next release

 

AppStudio Player now supports Integrated Windows Authentication (IWA) on Portal for ArcGIS. This is a requested feature for users who have configured Player to work with an IWA security to sign in and connect to ArcGIS Online or Portal for ArcGIS.  This new feature makes it seamless to use a Windows account to log into Player easier and faster.

 

 

                                                              

 

 

AppStudio Templates

All the three templates - Map Viewer, Map Tour and Quick Report have introduced new features, enhancements, and improvements in user experience.

 

You can now view secured web maps contents in the Map Viewer template. In addition to that, you can also download and view Mobile Map Package (MMPK).  Quick Report template now supports audio and video attachments (Beta). A new basemap switcher was added to the Map Tour template and the side panel to view photo and description along with the map for the large screen was improved.  

 

Check this blog post to learn more about what's new in AppStudio templates.

 

AppStudio Framework

 

We listen to your feedback carefully and have improved documentation and code samples for the usage of the AppFramework.  This is available both inside the Qt Creator help and online.

 

Exciting new plugins (Beta) now are available with 2.1:

 

  • Biometric Authentication - Authenticates user within the app through fingerprint scan
  • Secure Storage Stores data encrypted in the system Keychain
  • Devices - Provides data on connected devices (e.g. printers, weather sensors, laser scanners)
  • Positioning - Provides high-accuracy positioning and satellite data from a capable device
  • Inter-app Share (AppFramework Clipboard extension) - Brings up the standard iOS, macOS or Android share sheet that allows you to share text or URL to other application

 

         

                    

 

We are excited about the addition of these new plugins. It's just not about new, a bunch of bug fixes and enhancements have also gone into the existing plugins based on your feedback (Thank you). We have also added new samples showcasing how to use the plugins from both the 2.0 and the 2.1 release. These samples are available in AppStudio Desktop and are just a click away.  We are planning to write a detailed blog post highlighting some of the new plugins and use cases in the near future.

 

Note: These new plugins are currently in beta, so we’re looking forward to your feedback in how to improve these features in the future.

 

We hope you enjoy all the new updates, features and bug fixes included in this release.  As always, we will continue listening to your feedback and bringing new features to improve your app development experience.  Do not forget to share your awesome app with us to be showcased in the AppStudio Apps Showcase Gallery

 

                                      Follow us on Twitter @appstudioarcgis for latest updates and news

 

List of support issues addressed

BUG-000087195

AppStudio Player: Return to Gallery (App Exit) translation issues got fixed

BUG-000095416

Issue with untranslated Sign In page

BUG-000103775

In AppStudio for ArcGIS, a Map Viewer app does now utilize 'feature search' from all layers within the referenced web map.

BUG-000103906

Successfully signing in after clicking the 'Upload' or 'Make' button redirects users to the 'Upload' or 'Make' window.

BUG-000106828

Fields that have a range domain applied to them now appear in AppStudio Player for ArcGIS.

In this tutorial, you will learn how to quickly create a native app that loads a public Web Map and display current device location on a map using AppStudio for ArcGIS. We will take advantage of ArcGIS Runtime for the mapping, one of the five ready-to-use Material Design Layouts available for the app and device GPS for location.  

 

Time required: 10 - 20 mins (if the prerequisite software is installed)

 

You will create an app that looks like the illustration below, the main features of this app include:

  • Load a public Web Map
  • Tap on the Add button to display Web Map name on a pop-up
  • Tap on the Home button to return to the initial Web Map extent
  • Tap on the Location button to display the current device location

 

Final result:

 

Code behind:

 

Getting ready:

  1. You will need AppStudio Desktop (Standard). If you are new or have not yet licensed AppStudio Standard please watch this tutorial to get started with a trial account.
  2. You will need to download resources (attachment) to follow the tutorial.

 

Step 0. Create a new App:

Let’s start from one of the readily available layouts in the AppStudio Desktop called "Simple Layout(Material Design)".

  • Open AppStudio Desktop
  • Click on the New App Button
  • Click on the Layout tab
  • Choose Simple Layout (Material Design) and click on the Create button
  • Once the app is created, click on the Edit Title icon on the top of the side panel to rename the app.  We can call it "My first app", click on the Save Changes icon.  
  • Click on the Edit icon on the side panel to open the Qt Creator IDE
  • By default, the first QML file used by the app will be loaded into the Editor (MyApp.qml)

 

Step1. Import statements

You can tell the app which modules, components, or plugins you want to use by adding an import statement. For example, to use the material style in the app, we need to add the import statement import QtQuick.Controls.Material 2.1.  In this step, you need to add three more import statements in order to use ArcGIS Runtime as well as enable location-based function.

 

//ArcGIS Runtime
import Esri.ArcGISRuntime 100.1

//GPS
import QtPositioning 5.8
import QtSensors 5.2

 

Step 2. Change primary color property. 

Material primary color can be used to develop your branding color. Material accent color holds the accent of the theme, it can be same as the primary color.  In this step, let’s change the primary color from "#3F51B5" to "#8f499c"

 

    readonly property color primaryColor: "#8f499c"

Keyboard shortcuts to save changes

Windows: Ctrl + S

MacOS: command + S

 

Keyboard shortcuts to run apps in Qt Creator 

Windows: Shift + Alt + R

MacOS: shift + option + R

 

Your app should look like this at this point  

Step 3. Header

The Simple Material Design Layout already has a header on it, therefore, we do not need to add any additional code in this step. I want to point out that ToolBar QML type is used to define the header.  The header height is 56 units and the background color is Material.Primary color.  Inside the ToolBar, RowLayout QML type was used to position the contents.

 

Step 4. Load a Public Web Map

In this step we will be adding a map to the app using ArcGIS Runtime. Remember that the import was added earlier in Step 1.

 

The MapView is a virtual class from the ArcGIS Runtime that renders data in a map and allows users to interact with the map. The initUrl property inside the Map QML type is used to initialize the web map. The initUrl can be item details page url, map view page url, or sharing data url.  

 

Please add the following code below the comment // TODO:-Add Code here to the MyApp.qml file

under the comment.// TODO:-
Add Code here
under the comment.// TODO:-
Add Code here
under the comment.// TODO:-
Add Code hereto MyApp.qml file

 

        MapView{
            id:mapView
            anchors.fill: parent
            Map{
                id:map
                initUrl: "http://www.arcgis.com/home/item.html?id=7811ccdb71c84635a7a42eb020403615"
            }
        }

 

Step 5. Add Web Map Name to the Pop-Up

Let us replace the default text shown while clicking on the Add icon with the Web Map title. To do this, go to Dialog component and replace the Label text property with the following code. Note that the value is a property binding to the item title of the webmap as loaded by the Map (this is really awesome and so convenient. QML rocks!!!)

 

text: qsTr(mapView.map.item.title)

 

            

 

Your app should look like this at this point 

Step 6. Add Float Action Button Component

Now let's change gears a bit and try to structure our app by using re-usable components for the UI like buttons.

 

In QML, any snippet of code may become a reusable component. A file-based component is created by putting a QML element into a separate QML file. The file name is the element name and you can use the component by calling its file name. I have created a file-based reusable float action button component for Home button and Location button. The attached folder contains reusable component file FloatActionButton.qml. Once you have downloaded the attachment, you can add this file to the app project.  To do this, go to AppStudio Desktop and choose the app that you are working on

  • Click on the Files icon on the side panel
  • Create a new folder and name it “controls”
  • Copy and Paste FloatActionButton.qml file to the “controls” folder

You should be able to see this in the Qt Creator

 

 

Now that the FloatArctionButton component is added to the project, you might wonder how to use it? First of all, you need to add the import statement.  After that, you can directly call the file name which is same as the component name FloatActionButton in the main file (MyApp.qml) to use the Float Action Button component.

import "controls"

 

Step 7. Add Home Button and location Button Image

The next step is adding the Home button and Location button image to this project. (please find images in the attached folder) To do this,

  • Go to AppStudio Desktop and choose the app that we are working on.
  • Click on the Files icon on the side panel
  • Copy and paste home.png and location.png to the assets folder.

You should see this in the Qt Creator

 

 

Step 8. Add Home Button

We will use a positioning elements ColumnLayout to arrange Home button and Location button by stacking them on top of each other. Let’s add the following syntax inside the MapView QML type and below the Map QML type.

 

            ColumnLayout{
                anchors{
                    right: parent.right
                    rightMargin: 16 * scaleFactor
                    verticalCenter: parent.verticalCenter
                }
            }

 

Inside the ColumnLayout QML type, let’s add the Home button by calling the Float Action Button component name  FloatActionButton.  Please add the following code.  Note that when clicking on the Home button, we will call the setViewpointWithAnimationCurve method, it is used to return to initial Web Map extent. The first parameter of this method map.initialViewpoint sets the viewpoint, the second parameter 1.0 is the number of animation seconds, and the last parameter Enums.AnimationCurveEaseInOutCubic is a type of animation. 

 

                FloatActionButton{
                    id:homeButton
                    imageSource: "./assets/home.png"
                    onIced: {
                        mapView.setViewpointWithAnimationCurve(map.initialViewpoint, 1.0, Enums.AnimationCurveEaseInOutCubic)
                    }
                }

 

 

 

Your app should look like this at this point 

 

Step 9. Set Up Location Source

In this step, we need to set up location source by adding LocationDisplay QML Type.  PositionSource is used to provide the device’s current position.  The import for this was already added in Step 1. Please insert the following code below the ColumnLayout QML type.

 

            locationDisplay {
                positionSource: PositionSource {
                }
            }

 

Step 10. Add Location Button

The last step is to add a Location button below the Home button by adding the following code.  Note that there are three different location display modes in the ArcGIS Runtime. In this case, we are using Enums.LocationDisplayAutoPanModeRecenter.

 

                FloatActionButton{
                    id:locationButton
                    imageSource: "./assets/location.png"
                       onIced: {
                          if (!mapView.locationDisplay.started) {
                              mapView.locationDisplay.start()
                              mapView.locationDisplay.autoPanMode = Enums.LocationDisplayAutoPanModeRecenter
                              colorOverlay.color = "steelblue"
                          }else {
                              mapView.locationDisplay.stop()
                              colorOverlay.color = "#4c4c4c"
                        }
                    }
                }

 

 

 

Since this is an ArcGIS Runtime based app do not forget to add a free lite license (check the tip below, it's pretty easy)

To set a free Runtime Lite license (remove watermark from the map):

1. Click on the Settings icon on the side panel

2. Click on the Advanced button

3. Click on the Set Lite License button and Close Advanced Settings

4. Click on the Apply button

 

And that it, it is that easy to create your own mapping application with AppStudio. Now you can use AppStudio Player to test the app on different devices and also use Cloud Make to build executables of your app to distribute them in the store or within your own enterprise/business.

 

Interested to learn more about how to write similar apps as in this tutorial or even more advanced desktop or mobile apps with AppStudio, then you will not want to miss watching and learning from the recent recordings from the two-day workshop (Yes its free ).  Here is the link for about 12 hours of content to become an expert in writing apps. Happy coding!

 

                                

 

We are excited to announce the release of five brand new beautiful material design layouts.  These ready-to-use layouts will not only help you get started in creating material design apps with AppStudio but also get you familiarized with the latest Qt Material Control style.  You can find these layouts in the AppStudio Desktop Edition.

 

What’s Material Design

Material design, which takes inspiration from the study of paper and ink, is a visual and interactive card-based design tool that was announced by Google in 2014.  Google’s initiative is to develop a much cleaner and more colorful unified user experience that can be adapted across different platforms and different device sizes.  Many Google applications were revamped to follow the material design principles (such as Gmail, Google Drive, Google Calendar, YouTube, etc.).

 

Material Styles

The new Qt Quick Controls 2.0 comes with three styles: Default, Material, and Universal.  We added support for Material Style, which is based on the Material Design Guidelines, and Universal Style, which is based on the Microsoft Universal Design Guidelines in the AppStudio for ArcGIS 2.0 release.  The material style is not a native Android style; it is a cross-platform control style that runs on any platform.  You may have noticed that one of the AppStudio templates, the Map Viewer template app, has been updated to the material design standard.

 

New Material Design Layouts

We released five brand-new material design layouts to help you get started with implementing the material design in your apps.

 

Simple Layout (Material Design)

 

This is a one-page simple layout with a header and a floating action button on it.  When you tap the floating action button, a dialog will pop up with the message “Welcome to AppStudio” on it.

 

 

 

Multipage Layout (Material Design)

 

This is a multiple page layout using a StackView QML type demonstrates how to navigate between different pages in your app. You can press the button to go to the next page and press the back icon on the header to go back to the previous page.

 

 

Side Menu Layout (Material Design)

 

The side menu layout is one of the most demanding and popular layouts. When you hit the menu icon on the top right, a navigation drawer slides in from the left with all of the navigation options on it. You can find this layout in many popular apps such as Twitter, Gmail, and Uber.

 

 

Tab Layout (Material Design)

 

This tab layout is extremely useful when there are multiple tabs in a page.  When you hit different tabs, the corresponding item shows up on the page.

 

 

Onboarding Layout (Material Design)

 

The onboarding is the very first thing you see after downloading an app.  Onboarding screens introduce you to the app and demonstrate how to use the app. SwipeView QML Type is used in this layout to navigate between different pages by swiping.

 

 

             

   

 

How to Get Material Design Layouts

  1. Open AppStudio Desktop
  2. Click on the New App Button
  3. Click on the Layouts tab
  4. Select the Layout and click on the Create button

 

 

You can also create your own material design app without using material design layout.  All you need to do is add the import statement when creating a new app.  

 

import QtQuick.Controls.Material 2.1

  

I hope you are as excited as we are about the new material design layouts. Now it is your turn to create some awesome apps with the material design style.

 

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!

 

ArcGIS AppStudio