Skip navigation
All Places > AppStudio for ArcGIS > Blog
1 2 3 Previous Next

AppStudio for ArcGIS

97 posts

Faking-it is generally frowned upon – but demonstrating an app that is designed to work outdoors with a GNSS receiver at say a conference, or for your colleagues in the office, warrants a little creative location simulation. For years we’ve hit this problem ourselves at the user conference in San Diego, and after various iterations of fake GPS, I’d like to share our latest offering, by way of an AppStudio sample.

 

As of AppStudio 4.2, the GNSS Discover sample has the ability for you to:

  • Record a NMEA log file from a connected location provider
  • Playback recorded NMEA messages as if they were coming directly from the connected location provider.

 

You can also play back files created from other apps – not just GNSS Discover. Some GNSS receivers have the ability to save these files and there are tools online that allow to create simulated files. You can also save the file on your phone and copy it to your desktop to playback. The same file is compatible on all platforms.


What is a NMEA log file?

NMEA 0183 is the data specification standard that AppStudio uses to communicate with GNSS receivers. NMEA messages contain lines of data called sentences. To cut a long story short, save these sentences to a file, and you can replay them in an AppStudio app just like when they are coming directly from a satellite system. The contents of the file will look something like this:

 

 

Record a NMEA log file

To capture a NMEA log file with the GNSS Discover sample, create an app with the sample and download it to Player. Connect a receiver to your device and head outside for a walk (or ride, or drive). For more information see Connect your receiver to your device.

  • Click the satellite icon at the top of the app and go to the GNSS location status page.
  • Switch to the Debug tab.
  • Click the Record button.

 

 

Whilst you are recording, you can return to the map screen or anywhere else in the app. When you are finished moving around, come back to the Debug tab and Stop recording.

Recorded log files are saved to the folder [User home directory]\ArcGIS\AppStudioPlayer. Each time you capture a new log a new file is created.

 

Playback a NMEA log file

Playback of a NMEA log file is almost indistinguishable from connecting to a physical receiver. On the location providers page, click Via File, browse to the NMEA log file and click OK.

 

 

On the About page of the file there are two settings to consider: loop at end of file (great if you want to capture a short circuit that you can continuously loop through, and update rate. The default update rate is 1Hz which is typical of most receivers. This would mean the playback is in real time. Depending on your demonstration, it might suit to speed things up!

 

 

Once you have configured a file location provider, you can use the app in exactly the same way as you would with an external position source. The location status pages will show all the information as you would see from the external position source, and if your app is designed to capture locations, all the available metadata will be captured.

 

 

And of course – as this is now in AppStudio, you can expect for this feature to be coming soon in Survey123 and QuickCapture. Record a NMEA log in one app and use it in any of the others. Magic!

What's New?

 

AppStudio has over 80 samples included in AppStudio and AppStudio Player, which showcase a lot of specific functionalities that you can add to your AppStudio apps. We are excited to announce that we have some new samples in ArcGIS AppStudio 4.2 release. In this release, we upgraded ArcGIS Runtime to 100.7 which lets us take advantage of the new mapping related features from ArcGIS Runtime in our apps. In the StoryMap, I will introduce three samples in this version 4.2:

  • NEW! Find Connected Features in Utility Networks
  • NEW! Create, Edit and Save KML File
  • UPDATED! Portal User Info (4.2)

      Please check the following link to see the full StoryMap introducing the updates in samples!

 

      New and Updated Samples in ArcGIS AppStudio 4.2 Release 

NOTICE: This AppStudio Workshop is now full. Those interested in the workshop can register to be put on the waitlist and notified of future workshops.

 

AppStudio for ArcGIS Virtual Workshop

The AppStudio for ArcGIS team will be holding a free virtual workshop starting on April 28th. This hands-on workshop will give attendees the knowledge and skills they need to quickly start building cross-platform native apps with AppStudio.  The workshop is divided into 4 sections which will be presented over a two week period.  Please see the agenda below for details on workshop dates and times.

Who should attend? Esri users who are interested in building cross-platform apps using AppStudio for ArcGIS.

 

We will be using Zoom video conferencing technology to present the workshop, this will give the AppStudio team the ability to interact with attendees through chat and video conferencing. We will post the workshop video recording each day, this will give attendees with scheduling conflicts an opportunity to catch up on the material before the next section.

 

This is a free workshop, but you must register to attend as space will be limited.

 

Cost: Free

Register for Workshop

 

 

If you are interested in attending, please click the Register button above and complete the registration form. 

If you have any questions about the workshop, send an email to appstudiofeedback@esri.com.  

-The AppStudio Team

 

 

Agenda:
Tuesday April 28th  9:00am – 12:00pm PST

Day 1 – ArcGIS AppStudio: The Basics

  • Workshop Introduction and Prep
  • AppStudio Overview
  • Tour of AppStudio Desktop
  • Introduction to AppStudio Player
  • Exercise Configuring your first App

Thursday April 30th  9:00am – 12:00pm PST

Day 2 – ArcGIS AppStudio: Design, Distribution and Customization

  • Tips and Tricks of App Design
  • Distributing your AppStudio Apps
  • The AppStudio Architecture
  • Customizing your app with Code
    • Introduction to Qt Creator
    • Working with QML + JavaScript
  • Exercise: Customizing an App with code 

Tuesday May 5th  9:00am – 12:00pm PST

Day 3 – ArcGIS AppStudio: Coding Essentials

  • Testing and Debugging your Apps
  • Using Sample code in your app
  • AppStudio Coding Concepts
    • Building Layouts with QML
    • Using JavaScript in your Apps
  • Exercise: Create an app from Scratch

Thursday May 7th 9:00am – 12:00pm PST

Day 4 – ArcGIS AppStudio: Mapping and Advanced Components

  • Introduction to ArcGIS Runtime
  • Exercise: Putting a Map in your App
  • The Benefits of the AppStudio Framework
  • Add cross-platform functionality with Plugins

Exercise: Add Framework Components to your App

Although I’m generally not excited when I see a parking inspector on the side of the road, the technology nerd in me does always look around to see what gadgets they are using. Gone are the days of a notepad and pencil, instead they usually have an all-in-one device, or a phone with a printer hanging on their belt, to print out the tickets. 

 

Keen viewers of the AppStudio 4.2 highlights video  would have caught a glimpse of one of our newest samples - Print Location. This sample shows how your app can connect to a bluetooth printer, display a print preview, and send a print job directly to the paired printer. So, although you might not be designing a parking inspector app, you can now add the ability to print information from your app on the spot: a receipt of services completed, or evidence of data entered in the app. 

 

The printer used in the highlights video is a Zebra iMZ220. We’ve tested this printer on all our supported platforms and have had it whitelisted in AppStudio Player on iOS so you can use it on your iPhone or iPad, as well and Android, Windows, Mac and Ubuntu. Other printers can work in a similar way, and might only need a little tweaking of this current app. This app has not been designed specifically for, or tested with other printers, but can be used as a starting point for your own awesome app that prints to a bluetooth printer. 

 

Explore the Print Location sample 

 

The Print Location app is available in AppStudio for you to use as a sample. Of course, to fully test this app you will need a printer, but even if you do not have one, you can try out the print preview and get an idea of how you can use it. 

  1. Launch and sign in to AppStudio on your desktop. 
  2. Click New App, search for and choose Print Location and click Create. 
  3. Click Upload to make this app available in your ArcGIS organisation. 
  4. Launch and sign into Player on your device. 
  5. Browse for and download your new app, and click Play. 

 

There are three tools in this app: 

  • Settings 
  • Print Preview 
  • Print 

 

The Settings tool will be familiar to anyone who has worked with our GNSS Discover sample or any of apps that connect to a bluetooth GNSS receiver. The concept here is the same. You first pair the bluetooth accessory with the device, the app needs to then identify that paired device, and then once identified it can send or receive information to or from it. 

 

The Print Preview demonstrates what information will be sent to the printer. In this sample, see how there is a combination of things that were visible in the app – ie: the map – and things that were visible ie: the coordinates and time stamp. You choose what to print out independently of what is shown on the screen. 

 

The Print tool is self-explanatory. Whatever is shown in the print preview, is what is sent to the printer when you click Print. 

 

Things to consider  

 

  • An app that needs to communicate with a printer needs the Bluetooth capability to be set. 
  • This sample specifically filters for only devices that have ‘iMZ’ or ‘Zebra’ in their name. If you are experimenting with a different printer, remove (or comment out) lines 87 and 89 (leaving line 88) from /BluetoothPlugin/BluetoothManager/BluetoothSources.qml. 

When you do this, you will see that all paired Bluetooth devices will appear in the list. There isn’t a standard device type that can be used to filter for only printers, so once you get your app working with your printer, think of a good name filter to use to hide the noise of all possible pair devices. 

  • Whitelisting is required on iOS. In the case of Apple any hardware accessories that are to be used by an app, need to be identified by that app and vice versa. For details see Apples MFi Program, but the short version is that if you have a printer you want to use on iOS with your app, the printer manufacturer needs to identify your app, and your app needs to identify them. We have already whitelisted the Zebra iMZ220 with Player, but If you have a different printer you’d like to use with your app, I recommend testing it out on Android or Windows first, and then once you have it working on those, consider whitelisting. If you are using Player to run your app – please contact us with information about your printer and we will see it’s a device, we can have whitelisted. 

 

Do you want to quickly and easily customize AppStudio Player without writing any code? Well, we have great news for you. With AppStudio 4.2 release, you can now create a custom profile (beta) for AppStudio Player and then deliver the custom profile experience to others with an Http URL link. The custom profile lets you control the contents and appearance of the Player and is managed by configuring a group in your ArcGIS organization. The custom profile will show the end-user only the apps that are shared within the group, either AppStudio native apps or web apps created in your ArcGIS organization. You can also add tags in the group to control the Player appearance such as branding color, app header title, and feedback email address.

                              

How to set up a custom profile

 

Watch the tutorial video or follow the steps below to learn how to create a custom profile.

 

 

Step 1. Create a group in ArcGIS Online or Enterprise

Sign in to your ArcGIS organizational account and create a group. Then provide title, thumbnail, summary, and description to the group. These contents will be displayed in the custom profile About page

 

            

 

Step 2. Share AppStudio native apps and web apps

Select the AppStudio native apps and web maps that you would like to be displayed in the Player and share them with the group created from step 1.

 

         

 

Step 3. Add tags for the group

You can add tags in the group to configure AppStudio Player. As of AppStudio 4.2 release, we support the following four tags:

 

  1. brandcolor:6e2f2f (Player branding color, the value is the hex code of the color)
  2. apptitle:Naperville (Text on the app header)
  3. feedbackemail:1234John@gmail.com (Feedback email address)
  4. lang:en (Player language, the value is the four-letter LCID string language code)

 

Note:

 

          

 

Step 4. Create a Player link

 You can now create a link that will launch Player with your custom profile on either iOS and Android. This allows you to immediately open and pass specified content (parameters) from the link to the app.  Follow the below format to create a Player link that includes the group ID.

 

https://appstudio.arcgis.com?groupid=<enter-group-id-here>

i.e. https://appstudio.arcgis.com?groupid=9bb613e2f3fa48f694163e9538ac5a33

 

Step 5. Launch Player with the custom profile

The last step is to send the Player link to your mobile device and tap on it to launch the Player with the custom profile. If you want to remove the custom profile, you can tap on the menu > About page > Remove profile button

 

Note: Make sure you have the latest AppStudio Player version 4.2 or above, it is available from Apple App Store or Google Play store.

 

                                                         

 

Custom profiles provide a new way to re-brand Player and distribute a curated set of apps, and we can’t wait to see how our users adopt this new deployment option. We would like to receive feedback or suggestions to better support your needs. Please leave your comment below or reach out to us at appstudiofeedback@esri.com.

 

  • New to AppStudio? Check out this website to learn more about what AppStudio for ArcGIS can do to you and your organization. 
  • Become an AppStudio for ArcGIS developer! Watch this video on how to sign up for a free trial. 
  • Follow us on Twitter @AppStudioArcGIS    to keep up-to-date on the latest information and let us know about your creations built using AppStudio to be featured in the AppStudio Showcase.
  • The AppStudio team periodically hosts workshops and webinars; please sign up for the AppStudio newsletter if you are interested in information regarding AppStudio events.

We are excited to announce the release of AppStudio for ArcGIS Version 4.2.  This release rolls out many new features and enhancements to help you and your team create rich experiences in building and distributing cross-platform native apps. Read this blog post to learn more. 

 

Bug Fixes: 

 

 

BUG-000099284

Usability

The Map Viewer application template in AppStudio for ArcGIS does not display attachments.

ENH-000128388

Documentation

Update app before creating app installation files using cloud make

BUG-000121603

FailureError

Not able to get “picturemarkersymbol” for specific layer after application build.

BUG-000095190

Failure/Error

Fixed the bug in which related records in web map pop-ups did not fully appear in a MapViewer application. Only the field headers are present.

BUG-000127127

Documentation

The French documentation for 'Install AppStudio for ArcGIS' is unclear.

BUG-000126914

Failure/Error

Map Viewer template does not show in Gallery view when one web map is in a referenced group with MMPKs.

 

 

  • New to AppStudio? Check out this website to learn more about what AppStudio for ArcGIS can do to you and your organization. 
  • Become an AppStudio for ArcGIS developer! Watch this video on how to sign up for a free trial. 
  • Follow us on Twitter @AppStudioArcGIS    to keep up-to-date on the latest information and let us know about your creations built using AppStudio to be featured in the AppStudio Showcase.
  • The AppStudio team periodically hosts workshops and webinars; please sign up for the AppStudio newsletter if you are interested in information regarding AppStudio events.

We are excited to announce the release of AppStudio for ArcGIS version 4.1. This release is packed with exciting new features, enhancements, and bug fixes to help you create cross-platform native apps easier and faster. Read this blog post to learn more. 

 

Bug Fixes:

 

BUG-000121249
Fixed a bug in AppStudio Player on iOS in which the front camera displays contents upside down.
BUG-000123403
Fixed a bug with legend display in the AppStudio for ArcGIS Map Viewer template.
BUG-000123618
Fixed a bug in Map Viewer template which displayed duplicated layers in the Content tab on Android and iOS.
BUG-000125950
Fixed a bug due to which AppStudio did not respond to interactions with Surface Pen.
ENH-000098510
AppStudio help documentation has been re-structured.
BUG-000095190Related records in web map popups do not fully appear in the MapViewer application (AppStudio for ArcGIS app), only the field headers are present.

 

 

Please visit this online documentation to see a full list of new features, enhancements, and bug fixes. 

    

 

  • New to AppStudio? Check out this website to learn more about what AppStudio for ArcGIS can do to you and your organization. 
  • Become an AppStudio for ArcGIS developer! Watch this video on how to sign up for a free trial. 
  • Follow us on Twitter @AppStudioArcGIS    to keep up-to-date on the latest information and let us know about your creations built using AppStudio to be featured in the AppStudio Showcase.
  • The AppStudio team periodically hosts workshops and webinars; please sign up for the AppStudio newsletter if you are interested in information regarding AppStudio events.

We are excited to announce the release of a new sample app - Nearby - available today in AppStudio for ArcGIS! This sample showcases how to find the nearest places of interest worldwide, filter them by category, and provide step-by-step directions from your current location. Give this new app a spin using the AppStudio Player (readily available to run in the samples tab) on your favorite mobile or tablet.

 

The source code for this app is available for you to learn and customize further in AppStudio Desktop (4.0 and above) along with all the other great sample apps. Just open Desktop, click on the New App button, and either browse or type Nearby in the search box to find the sample and click Create.

 

Please check this blog for feature highlights

 

Technical Highlights                          

 

Geocoding

 

We accomplish geocoding process by using Esri’s World Geocoding Service which allows you to search for places using high-level concepts such as a category level 1 descriptor (e.g “POI” for places of interest), a category level 2 descriptor (eg. “Food”) or a category level 3 descriptor which is more specific (eg. “Japanese food”). The category filters and other search criteria such as the maximum number of results, output fields, and search area are defined using the ArcGIS Runtime SDK’s GeocodeParameters.

 

Geocoding in this sample is implemented using the LocatorTask class. Note that we are using an online locator URL in the sample, but the URL can be replaced with your own custom online/offline locator. Inside the project folder, you will find the LocatorTask in the Views/Geocodeview.qml file (line 333).

 

 

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

 

Routing 

 

In order to provide routing, we utilize Esri’s routing service which allows us to generate directions and display them to the user both as a route drawn on the map and as a list of turn-by-turn directions. 

 

We accomplish this using ArcGISRuntime's RouteTask class. Note that Esri’s online routing service requires authentication and thus all your routing requests will have to be authenticated with your ArcGIS online clientId  and clientSecret. Remember to add both of these keys inside the project in file Views/RoutingView.qml on lines 286 and 287 as shown below in the graphic below. 

 

OAuthClientInfo {        
   id: clientInfo
   clientId: "<<YOU CLIENT ID GOES HERE>>"
   clientSecret: "<<YOUR CLIENT SECRET GOES HERE>>"
   oAuthMode: Enums.OAuthModeApp


Credential {
   id: cred
   oAuthClientInfo: clientInfo
}
RouteTask {
   id: routeTask
   url: "http://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"
   credential: cred
   .
   .
   .
}

 

The sample also showcases how to get directions for two transport modes namely walking and driving. Switching between walking and driving directions is accomplished by simply setting three values of the RouteTask’s RouteParameters property as shown in the snippet below.  

 

function setToWalkMode() {
   routeParameters.travelMode.type = "WALK";
   routeParameters.travelMode.impedanceAttributeName = "WalkTime";
   routeParameters.travelMode.timeAttributeName = "WalkTime";
}

function setToDriveMode() {
   routeParameters.travelMode.type = "AUTOMOBILE";
   routeParameters.travelMode.impedanceAttributeName = "TravelTime";
   routeParameters.travelMode.timeAttributeName = "TravelTime";
}

 

Project Structure 

 

image showing nearby sample app project structure

 

When you open the sample files you will see that the project is divided into four folders as follows:

  • Assets folder contains all localized assets such as images, text strings, and colors that are used in the app.
  • Controls and Widgets contain components that are used to complete and manage the user interface.
  • Views contain files that implement the main functionalities of the app.
    • MapView.qml adds a map and provides all other functions for interacting with the map such as displaying graphics for found places and drawing routes.
    • RouteView.qml implements routing functionalities.
    • GeocodeView.qml, SearchView.qml, PlaceListView.qml and FiltersView.qml implement geocoding functionalities. We put these views in separated files in order to avoid having overly large code files.

 

We enjoyed creating this sample for you and hope you find it helpful as you create amazing native apps in AppStudio with nearby functionalities. Stay tuned for more samples rolling out soon. 

 

Resources:

 

 

  • New to AppStudio? Check out this website to learn more about what AppStudio for ArcGIS can do to you and your organization. 
  • Become an AppStudio for ArcGIS developer! Watch this video on how to sign up for a free trial. 
  • Follow us on Twitter @AppStudioArcGIS    to keep up-to-date on the latest information and let us know about your creations built using AppStudio to be featured in the AppStudio Showcase.
  • The AppStudio team periodically hosts workshops and webinars; please sign up for the AppStudio newsletter if you are interested in information regarding AppStudio events.

 AppStudio for ArcGIS is a cross-platform application development tool which enables our customers to create apps that work on a range of devices and platforms. Be it mobile devices running Android or iOS, or desktops with Windows, macOS or Linux, we strive to provide a seamless experience to our customers. 

 

In order to ensure that your apps continue to work on all your devices, we proactively test each update of our supported platforms to capture new issues and attempt to resolve them before you can find them! While testing our apps with iOS 13, we found a couple of issues which need your attention.  

 

 

Accessing the photo gallery on iOS 13 

 

We found that on iOS 13, any app that tries to open the iOS photo gallery freezes while accessing it. On further investigation, we found that this was caused due to an underlying bug in the Qt Framework, the details of which can be found in the Qt bug reports website  . This bug has been resolved and the fix will be available in Qt 5.12.6. However, since AppStudio for ArcGIS 4.0 is built on Qt 5.12.3, we have been working with the Qt Company to obtain a patch for this bug and we have already applied the patch to our cloud Make build servers.  

 

 

How does this affect you and what do you need to do? 

 

This bug only affects apps running on iOS 13 and that allow users to access the photo gallery to browse photos saved on their iOS device. If you have recently built such apps using Cloud Make from AppStudio for ArcGIS 4.0, a simple re-build of your app should fix this issue.  

 

If you are using Player to test or deploy your apps, we will patch the player and resubmit to the app store. So a simple update to player from app store should fix this issue. 

 

If you are planning to build your iOS app using Local Make, please contact us at appstudiofeedback@esri.com. Since the fix for this issue needs to be applied to the Qt installation, our team can provide guidance and support to you to implement the fix. 

 

 

New requirement while publishing iOS apps to Apple App Store 

 

Recently Apple has updated the requirements that apps need to fulfil before they can be published on the App Store. Starting with iOS 13, apps that need to access Bluetooth need to include a new Product List key – NSBluetoothAlwaysUsageDescription. The details of this new key are available in Apple’s developer documentation   .  With this hotfix, we have updated our cloud Make build servers to include this key in iOS apps that are built using cloud Make. If you intend to use local Make to build your iOS app and publish it to App Store, our team can guide you to ensure that your app meets this requirement. 

 

 

I hope this has been helpful and we look forward to your feedback at appstudiofeedback@esri.com.  

 

 

  • New to AppStudio? Check out this website    to learn more about what AppStudio for ArcGIS can do to you and your organization. 
  • Become an AppStudio for ArcGIS developer! Watch this video    on how to sign up for a free trial. 
  • Follow us on Twitter @AppStudioArcGIS    to keep up-to-date on the latest information and let us know about your creations built using AppStudio to be featured in the AppStudio Showcase   .
  • The AppStudio team periodically hosts workshops and webinars; please sign up    for the AppStudio newsletter if you are interested in information regarding AppStudio events. 

 

The AppStudio for ArcGIS 4.0 release recently rolled out with many exciting new features and enhancements. In this blog, let’s look at the new features and improvements added to the  AppStudio Player for ArcGIS. The Player allows you to instantly view AppStudio apps on a real device (desktop or mobile) without requiring a full build and deployment cycle.

 

You can download the latest Player from the Apple App store or Google Play store.

 

1. New setting to change languages on the fly 

AppStudio Player is available in over thirty languages, and by default, it will be set to the language of your device. However, if you want to test an app in a different language, this required that you change the language setting for the entire device. 

 

We are excited to bring a brand-new feature in this release that allows you to change the app’s language even without changing the device’s language. This new feature brings huge benefits, especially when testing app localization. (this could save you a whole lot of time). If your AppStudio app includes translation files, you can easily test your app on different languages by changing the Player’s language in the Settings page.   

 

         

                                                                               Player Language setting

 

2. New setting to clear local apps  

A recent request from our customers was to have the ability to clear or remove all the locally downloaded apps at once. We are excited to bring this handy functionality into AppStudio 4.0, which is available in the Settings page.   

 

          

                                                                           Player Clear Local Apps setting

 

3. AppStudio Player Enterprise template now supports opening web apps 

The AppStudio Player template is widely used as an enterprise distribution solution, and our users love to share and distribute their organization’s apps through this custom Player with their custom branding and configurations. One popular request we’ve heard from our users is the ability to open web apps along with the AppStudio native apps. 

We are excited to announce that with the 4.0 release, we have added a new Web Apps page in Player’s enterprise template to open web apps such as web maps, web scenes, Web AppBuilder apps, Story Maps, and Survey123 web forms available in your organization.  

Note: that this feature is only available if you are deploying your own version of the AppStudio Player enterprise template. Please let us know if you want us to support this feature also in the released app store version of AppStudio Player. 

          

  

                                                                       Open web apps in Player

 

Follow the following quick steps to configure an enterprise Player template to include your own web apps (feel free to go to step 2 if you already have a custom Player).  

 

Please make sure you have the latest version of AppStudio Desktop (4.0), and it is licensed at the Developer Edition.  

 

Step 1: 

  • Open AppStudio for ArcGIS 
  • Sign in to your ArcGIS Online or Enterprise account with the AppStudio for ArcGIS Developer Edition license  
  • Click on the purple New App button, navigate to the Enterprise tab, select Player (4.0 Template), and click on the Create button.  
  • Upload the Player you created 
  • Click on the Settings tool on the side panel  
  • Go to Licensing section and Register an ArcGIS Client ID to allow users to sign into the Player with OAuth authentication, then click Apply 

 

Step 2: 

  • Create a new group in your organization and add your web apps in it. The group can be private or public. If the group is private, you will need to sign into Player to access the group and the web apps within the group. 
  • Copy the group ID   

 

Step 3: 

  • Open the Settings tool while your custom Player is selected in AppStudio Desktop 
  • Go to Properties > General tab 
  • Provide the group ID that you have created from step 2 and enter it in the Web Apps Group ID field 
  • Click on Apply and run your Player app to test 

 

Create a new enterprise Player template

 

 

If you wish to learn more about customizing AppStudio Player, please check this tutorial.  

 

4. Bug fixes and other enhancements:  

  • Support for iOS 13  
  • Fixed the bug where local apps were not showing in emulators and simulators  
  • Fixed the bug where the Reset button is not showing when Sample page is hidden (enterprise template) 
  • Fixed the bug where Remote console option was still showing on the app loader side menu when disabling this property in settings (enterprise template) 
  • Fixed a few texts overflows issues in the Player item cards  
  • Fixed a bug where the wrong IP address was displayed in Remote Console while connecting to the desktop Console  
  • Few enchantments made to launching Player via the command line (desktop) 
  • Player enterprise template now supports showing the branding icon in both Home and About page instead of the default icon.  
  • New 4.0 samples and templates are now available in the Player Samples page 
  • Runtime for ArcGIS included in the Player updated to the latest version 100.6  

  

We hope you like the new features and enhancements added to AppStudio Player and its Enterprise template. We would love to hear feedback or any missing feature request from you to make your app development experience easier and faster. Please reach us at appstudiofeedback@esri.com or contact Esri support.  

 

 

 

 

  • New to AppStudio? Check out this website to learn more about what AppStudio for ArcGIS can do to you and your organization.
  • Become an AppStudio for ArcGIS developer! Watch this video on how to sign up for a free trial.
  • Follow us on Twitter @AppStudioArcGIS to keep up-to-date on the latest information and let us know about your creations built using AppStudio to be featured in the AppStudio Showcase.
  • The AppStudio team periodically hosts workshops and webinars; please sign up for the AppStudio newsletter if you are interested in information regarding AppStudio events.

The App Templates in AppStudio Desktop have been updated to work with the AppStudio 4.0. All four templates now support Runtime 100.6. Here is a list of other updates to the templates in this release: 

 

3D Scene viewer

 

  • In the AppStudio 4.0 beta release we introduced a new 3D Scene Viewer template - to discover, browse and interact with ArcGIS 3D maps (web scenes). Based on your feedback we have now added support for the offline scenes aka mobile scene packages in this release. Similar to other AppStudio template apps, you configure the template to consume your desired global web scenes and mobile scene packages by providing their item ids hosted within your organization or publicly across ArcGIS Platform.
  • This template now allows you to do sign-in to your organization across ArcGIS Platform to display the secured content (web scenes & mobile scene packages) and to download mobile scene packages. Once downloaded onto your device, the mobile scene package will be available to operate without any internet connection. Below is a quick video on how to display a mobile scene package. 

 

Note: To allow users to download a mobile scene package without signing in to an ArcGIS organization, Enable Anonymous Use can be used while creating, if you have licensed ArcGIS Pro with the ArcGIS Publisher extension.

 

Let us know what do you want to see in the future release in the comment below or by email.

 

 

Map Viewer

 

  • BUG-000122909 - Resolved issue to avoid mobile device screen locking while a mobile map package is being downloaded. If a user is downloading one or multiple mobile map packages, the device wouldn't go in sleep mode until the download is complete or user manually turns off the screen. 
  • The template now checks if a client ID is available before the user continues with a sign-in operation. If the client ID is not provided in the app, it will prompt the user.
  • Online and offline gallery sections now have individual limits to show the number of items in the gallery. For example, if 10 is set as the limit, the gallery will load up to 10 items each for the two categories. Previously the limit was shared between the two.  
  • AppFramework.Controls library reference has been removed from the Map Viewer template as the AppStudio Framework has deprecated this library.
  • Map Viewer template has been updated to use ECMA 7.0 javascript promises.
  • Other bug fixes and UI enhancements.

 

Quick Report

 

  • BUG-000124162- Resolved issue with submitting a report with audio or video attachments when submitting report through saved drafts.
  • AppFramework.Controls library reference has been removed from the Quick Report template as the AppStudio Framework has deprecated this library
  • Other bug fixes and UI enhancements

 

Map Tour

 

  • AppFramework.Controls library reference has been removed from the Map Tour template as the AppStudio Framework has deprecated this library
  • Other bug fixes and UI enhancements

 

 

Please feel free to test and provide your feedback through the GeoNet or emailing the team at appstudiofeedback@esri.com.

 

 

Become an AppStudio for ArcGIS developer! Watch this video on how to sign up for a free trial.

 

Follow us on Twitter @AppStudioArcGIS to keep up-to-date on the latest information and let us know about your creations built using AppStudio to be featured in the AppStudio Showcase.

 

The AppStudio team periodically hosts workshops and webinars; please click on this link to leave your email if you are interested in information regarding AppStudio events.

Have you made a great app for outdoor use, that would benefit from high accuracy location? Do your users want to improve the location that they capture or report in your app, by using an external receiver? Do you want to report a location in your app that is being fed from a receiver that is remote to you but available over a network? In each of these cases, you will want to add the ability to search for, and connect to, an external GNSS receiver in your app.

 

We have recently added this ability to a number of our apps – Trek2There, Survey123, QuickCapture – and now we have made that work available to you, as a small collection of custom components, so you can drop them into your own app.

 

There are a few considerations you need to evaluate before adding GNSS device discovery to your app – what hardware are you intending your app to be used on, what receivers you want to support – jump to the end of this post to explore those.

 

For now, I want to show you the mechanics of making this work. The code that you can add to your app is available as an AppStudio sample called GNSS Discover. You can download this directly to your computer and copy and paste contents of it to your app.

 

The following steps will demonstrate how to add GNSS device discovery to the Hello World (Runtime) starter app. I’ve deliberately chosen this lightweight app so you can see the few steps that it takes to add this complex functionality.

 

        1. Launch and sign in to AppStudio Desktop Edition.
        2. Search for and download, the GNSS Discover sample app.
        3. Click New App, choose Hello World (Runtime) and click Create.
        4. Select the app you just created in the AppStudio gallery, and from the side menu choose Files. This will launch a file browser showing you the files created for your new app.
        5. In the AppStudio gallery, select the GNSS Discover app that you downloaded already, and from the side menu choose Files. This will launch another file browser showing you the files of the sample app.
        6. Copy the subfolder called GNSSPlugin, from the sample app to the folder of your new app.
        7. Close both file browsers.
        8. In the AppStudio gallery, select your new app (created from the Hello World starter app) and from the side menu select Edit. Your app will now launch in your default code editor. You will make edits to the MyApp.qml file only.
        9. After the existing import statements at the top of the file, add the following reference for your app to be able to use the contents of the folder that you just copied to your project:

          import "./GNSSPlugin"

        10. Scroll to the bottom of the MyApp.qml file. Before the last curly brace, you need to add the following code. This code is also in the GNSSDiscover.qml of the GNSS Discover sample app. You can open this file and copy and paste from there if you prefer.

          // Manage connections to GNSS providers

          GNSSManager {

              id: gnssManager

              gnssSettingsPages: gnssSettingsPages

          }

          // GNSS settings UI

          GNSSSettingsPages {

              id: gnssSettingsPages

              gnssManager: gnssManager

          }

          // GNSS status UI

          GNSSStatusPages {

              id: gnssStatusPages

              gnssManager: gnssManager

              gnssSettingsPages: gnssSettingsPages

          }

        11. The GNSSManager that you have just added provides a new position source that will communicate with both your internal position source and any configured external position source. To use this, change the positionSource of the existing locationDisplay component, to be gnssManager. It should look like this:

          locationDisplay {

              positionSource: gnssManager

          }

          Save your work. If you choose to run your app at this stage (Alt+Shift+R), you will see the map launch and it will have two buttons, a home and location  button.

          Click the location button and see that the map will center on your current location. By default, the app is using your devices internal position source. To be able to use an external receiver, you need to be able to select one. We will next add a settings button , so you have somewhere to select a new receiver.

           

        12. Copy the existing locationButton component and paste a copy of it immediately below the original one.
        13. Change the id of the copied component to be settingsButton.
        14. Change the source to be

          "./GNSSPlugin/images/round_settings_white_24dp.png"

        15. Change the name of the parameters in the onHoveredChanged event of this button to be

          settingsButton

        16. Remove the contents of the onClicked event and replace with

          gnssSettingsPages.showLocationSettings()

          Run your app. See that there is now an additional button with the settings icon. Click on this button and see the settings page. On this page you can choose to connect to a GNSS receiver that is connected to your device.

           

        17. As an optional bonus – would you like to make the color of the settings button match the others? You can do this with a color overlay.Start by adding the Qt Graphic Effects plugin so you can use the color overlay component.
        18. At the top of the file where the other import statements are, add the following:

          import QtGraphicalEffects 1.12

        19. Add an id of settingsButtonImage to your button image component.
        20. Add the following code immediately after your button image component:

          ColorOverlay {

          anchors.fill: settingsButtonImage

          source: settingsButtonImage

          color: "black"

          }

          Ensure that the name for anchors.fill and source is the same as the name that your gave your settings button image in the previous step.

        21. Save your work and run your app. See that the settings button is now the same color as the other buttons.

           


          Instead of cloning and modifying an existing button, there is a settings button component in the GNSS Discover sample that you also could have used.  Steps 12-17 show how you add new functionality to your app whilst maintaining the existing presentation of tools.

           

          Also included in the GNSS Discover sample is a status button that indicates when the position source is connected, and when clicked, displays information coming from that position source. In the next step, we will add this button as is.

           

        22. After the last button in your app, paste the following (this code is also in the GNSS Discover sample)

          GNSSStatusButton {

          gnssStatusPages: gnssStatusPages

          }

Save your work and run your app. The status button is only visible when the location is active, so first click the location button for the status button to appear.  See that the status button has different styling to your other buttons. You can choose to style it as you wish. Click on the status button to see information coming from the position source.

 

 

You can add the components from the GNSS Discover sample to any other app in a similar way. Just include the GNSSPlugin folder in your app and reference the GNSS Manager, GNSS Settings and GNSS Status pages in your app. You can choose how to launch the settings and status pages to suit your needs. For alternative examples on how to launch those pages, take a look at the code for the GNSS Discover sample itself. This sample shows buttons for the status and settings pages, that appear on the toolbar of the sample app.

 

 

Things to consider

 

An app that needs to communicate with external GNSS hardware needs the high accuracy location and Bluetooth capabilities to be set.

Also, to be able to work on iOS devices, the receiver must be part of the MFi program as well as support the output of NMEA sentences.

 

Whilst building your app, we recommend you test in AppStudio Player. Player already has many GNSS receivers whitelisted so you can test your app on iOS before whitelisting your own app.

 

To learn more about using GNSS receivers with your apps see https://doc.arcgis.com/en/appstudio/api-guide/apihighaccuracygps.htm

 

We are excited to announce the release of AppStudio for ArcGIS version 4.0. This release is packed with exciting new features, enhancements, and bug fixes to help you create cross-platform native apps easier and faster. Read this blog post to learn about all of the updates.

 

Bug Fixes: 

 

Bug ID

Synopsis

BUG-000103403

Fixed a translation bug with AppStudio for ArcGIS for the 'Close' button in German.

BUG-000119230

Fixed the bug due to which Android builds were fails from AppStudio for ArcGIS when a valid Java KeyStore (JKS) is supplied with Cloud Make.

BUG-000122909

Fixed that bug due to which downloading a mobile map package in an iOS was failing when the iPhone screen is locked, returning the error message "Socket is not connected."

BUG-000122721

Fixed the bug in audiorecorder.pause() method which was breaking the recording file path.

BUG-000121926

Updated the documentation to have consistency in mentioning the Android Native Development Kit (NDK) version in the "Install development tools for local Make" page.

BUG-000124162
Fixed a bug due to which sending video attachments from drafts in Quick Report from an Android device was failing.

 

Deprecation:

 

 

Known issue:

  • Apps built with AppStudio 4.0 cannot be rotated to landscape mode on specific tablet devices when landscape mode is enabled on tablet and disabled on the phone.

Please reach out to us if you encounter this issue.

1. Introduction

 

Many, many, many years ago, in my local bookstore, I had my first experiences with computers. I typed in my first program and always thought what it did was cool:

 

10 PRINT "HELLO"
20 GOTO 10

 

 

Today, I'm going to look into iterators and generators, and, yes, make a connection to how these latest features in ECMAScript 7 update of AppStudio 3.3 and Qt 5.12.1 aren't too dissimilar from old school concepts.

 

 

2. For Of Iterators

 

 

In my previous blog, I talked about "For Of" and showed that it works with Javascript iterators and Javascript generators.

 

function *cities() {
    yield { name: "Hawaii", distance: 4221.73 }
    yield { name: "Los Angeles", distance: 96.65 }
    yield { name: "New York City", distance: 3853.10 }
    yield { name: "Redlands", distance: 1.12 }
    yield { name: "Seattle", distance: 1566.70 }
}

for ( let city of cities() )
    console.log( JSON.stringify( city ) )

View the full ForIter.qml on GitHub. Try it now on AppStudioBlogIterators | WebAssembly.

 

 

In the above example, we declare a Javascript generator which produces cities with their name and their distance from ESRI. We turn that Javascript generator into a Javascript iterator when we "call" it, i.e. cities(). As a Javascript iterator, we use a "for of" loop to process the results.

 

So far, nothing special. You can glean this sort of thing from any blog about Javascript iterators.

 

If we replace the "for of" syntax with a somewhat traditional looking "while" loop, we get to see some inner workings of the Javascript iterator:

 

function *cities() {
    yield { name: "Hawaii", distance: 4221.73 }
    yield { name: "Los Angeles", distance: 96.65 }
    yield { name: "New York City", distance: 3853.10 }
    yield { name: "Redlands", distance: 1.12 }
    yield { name: "Seattle", distance: 1566.70 }
}

const iter = cities()
let city = iter.next()
while ( !city.done ) {
    console.log( JSON.stringify( city.value ) )
    city = iter.next()
}

View the full WhileIter.qml on GitHub. Try it now on AppStudioBlogIterators | WebAssembly.

 

 

The first impression is this "while" version looks a bit hard to swallow. The "for of" shorten version looks cleaner. When you think about it, this version actually gives you more insight into the "yield" keyword. When "yield" is used, a value is returned from the Javascript generator, and the Javascript generator pauses execution until the next time we call "iter.next()".

 

At first, this may seem like an alien concept, but, if you look harder, you'll see this pattern in a lot of places, some quite old.

 

3. Unix head and tails

 

On Unix, we learn that in shell programming, we can join Unix commands together using Unix pipes. A pipe is a form of redirection that is used in Unix to send output from one program to another for further processing. The first process is not completed before the second is started. They are executed concurrently.

 

$ cat cities.txt

 

 

$ cat cities.txt | head -3

 

 

$ cat cities.txt | head -3 | tail -2


 

Whilst cat can produce 5 lines of text, in the above pipeline, it doesn't. The 3 Unix commands, cat, head and tail are executing concurrently. The cat command only needs to generate output, if the subsequent head and tail commands require it. In this example, we only require cat to generate 3 lines of text to fullfill the requirements of the subsequent head command.

 

We can mirror the above Unix statement in QML.

 

Button {
    text: qsTr("LA and NYC cities")

    onClicked: {
        function *cities() {
            yield { name: "Hawaii", distance: 4221.73 }
            yield { name: "Los Angeles", distance: 96.65 }
            yield { name: "New York City", distance: 3853.10 }
            yield { name: "Redlands", distance: 1.12 }
            yield { name: "Seattle", distance: 1566.70 }
        }

        function* cat( iter ) {
            yield* iter
        }

        function* head( iter, n ) {
            if (n <= 0) return
            for (let item of iter) {
                yield item
                if (--n <= 0) break
            }
       }

       function* tail( iter, n ) {
           let arr = [ ]
           for ( let item of iter ) {
               arr.push(item)
               if (arr.length > n) arr.shift()
           }
           yield* arr
       }

       for ( let city of tail( head( cat( cities() ), 3), 2) )
           console.log( JSON.stringify( city ) )
    }
}

View the full HeadAndTails.qml on GitHub. Try it now on AppStudioBlogIterators | WebAssembly.

 

 

Similar to the Unix head, tail, cat commands, the above head, tail, cat Javascript generator functions start executing concurrently. The data pipeline occurs when callers consume data and the Javascript generator functions yield data.

 

Because of the requirements of the head generator call, we only require the cat generator and the cities generator to generate 3 lines of output.

 

 

4. Infinite loops no longer taboo

 

 

Traditionally, we consider CPU intensive and/or infinite loops to be taboo in Javascript.

 

function helloWorldTaboo() {
    while (true)
        console.log( "Hello World" )
}

 

They block the UI, they make the program unresponsive, they may eventually lead to a crash. We consider such code taboo and we have been trained to not write in that style. We require the developer to rewrite their applications to use signals and slots or callback functions that help unblock the UI.

 

Rules changes when it comes to Javascript generators and Javascript iterators. Apparent infinite loops are no longer taboo:

 

function* helloWorldGenerator() {
    while (true)
        yield "Hello World"
}

 

The following demonstrates the Javascript generator working with a Timer object. The program is not CPU intensive and not quite an infinite loop in that one can stop the invoking the Javascript generator by stopping the Timer.

 

 

Button {
    text: qsTr("Run!")

    onClicked: {
        function* helloWorldGenerator() {
            while (true)
                yield "Hello World"
        }

        helloWorldTimer.iter = helloWorldGenerator()
        helloWorldTimer.start()
    }
}

Timer {
    id: helloWorldTimer
    property var iter
    running: false
    repeat: true
    interval: 100
    onTriggered: {
        let item = iter.next()
        if (item.done) {
            stop()
            return
        }
        console.log( item.value )
    }
}

View the full InfiniteHello.qml on GitHub. Try it now on AppStudioBlogIterators | WebAssembly.

 

 

 

5. Generators are bidirectional

 

 

In Unix, the data flows in Unix pipes in one direction. With Javascript generators, the data flow can be bidirectional. We can take a value from the Javascript generator modify and send the result back to the Javascript generator.

 

The following shows the generator yielding 1, 2 and 3 respectively. For each value, we square the result and send the square back to the generator.

 

function* gen() {
  console.log( yield 1 )
  console.log( yield 2 )
  console.log( yield 3 )
}

let iter = gen()
let v = iter.next()
console.log( JSON.stringify(v) )
v = iter.next( v.value * v.value )
console.log( JSON.stringify(v) )
v = iter.next( v.value * v.value )
console.log( JSON.stringify(v) )
v = iter.next( v.value * v.value )
console.log( JSON.stringify(v) )

View the full Bidirectional.qml on GitHub. Try it now on AppStudioBlogIterators | WebAssembly.

 

 

 

6. Mixing Javascript generators with Promises

 

 

In a previous blog on Promises, I talked about async / await missing in AppStudio 3.3 and Qt 5.12.1 and that you can vote to have it included it https://bugreports.qt.io/browse/QTBUG-58620.

 

I've read in other blogs that async / await is considered by some as syntactic sugar on Javascript generators yielding Promises.

 

I gave the following example demonstrating what this looks like with _asyncToGenerator() a function that works with Promises inside Javascript generators:

 

Button {
    text: qsTr( "Test Promise async/await (Babel)" )

    onClicked: {
        _asyncToGenerator( function*() {
            try {
                showTitle( yield download( "GET", "https://appstudio.arcgis.com" ) )
                showTitle( yield download( "GET", "https://community.esri.com/groups/appstudio" ) )
                showTitle( yield download( "GET",
"https://community.esri.com/groups/survey123" ) )
            } catch ( err ) {
                console.log( "Caught Error: ", err.message )
                throw err
            }
        } )()
    }
}

View the full PromiseBabel.qml on GitHub. Try it now on AppStudioBlogIterators | WebAssembly.

 

 

 

6. Using ArcGIS Online Search API

 

The following uses Promises to invoke the ArcGIS Online Search API iteratively to retrieve titles of over 200+ AppStudio samples:

 

Button {
    text: qsTr("Search")

    onClicked: {
        _asyncToGenerator( function*() {
            networkRequest.url = "https://www.arcgis.com/sharing/rest/search"
            networkRequest.responseType = "json"
            try {
                let f = "pjson"
                let q = "type:Native Application owner:appstudio_samples"
                let start = 1
                let num = 10
                while (start !== -1 ) {
                    let resp = yield networkRequest.sendWithPromise( { f, q, start, num } )
                    let { nextStart, total, results } = resp.response
                    for ( let result of results )
                        console.log( result.title )
                    start = nextStart
                }
            } catch (err) {
                console.log("Caught exception: ", err.message)
                console.log(err.stack)
                throw err
            }
        } )()
    }
}

View the full ArcGISOnlineSearch.qml on GitHub. Try it now on AppStudioBlogIterators | WebAssembly.

 

 

 

7. Maze Solving Algorithm

 

 

The following demonstrates how you can use Promises in a recursive manner to solve a maze:

 

Button {
    text: qsTr("Solve Maze")

    onClicked: {
        _asyncToGenerator( function*() {
            function solve(x, y) {
                return _asyncToGenerator( function*() {
                    maze[y][x] = someDude
                    printDaMaze()
                    yield sleep(100)
                    if (x === endingPoint[0] && y === endingPoint[1]) return true
                    if (x > 0 && maze[y][x - 1] === free && (yield solve(x - 1, y))) return true
                    if (x < mazeWidth && maze[y][x + 1] === free && (yield solve(x + 1, y))) return true
                    if (y > 0 && maze[y - 1][x] === free && (yield solve(x, y - 1))) return true
                    if (y < mazeHeight && maze[y + 1][x] === free && (yield solve(x, y + 1))) return true
                    maze[y][x] = free
                    printDaMaze()
                    yield sleep(100)
                    return false
                } )()
            }
            if (yield solve( startingPoint[0], startingPoint[1]) ) {
                console.log( "Solved!" )
                printDaMaze()
            } else {
                console.log( "Cannot solve. :-(" )
            }
        } )()
    }
}

View the full MazeSolver.qml on GitHub. Try it now on AppStudioBlogIterators | WebAssembly.

 

 

 

8. Experimental WebAssembly

 

 

Qt now offers a WebAssembly target.

 

This means it is possible to deploy QML applications in a web browser. WebAssembly is an experimental technology meaning it's an evolving platform. Expect a lot of things to not work. With the disclaimer out of the way, you can test all of the code snippets in this blog in a Web Assembly application here: https://stephenquan.github.io/AppStudio/Apps/AppStudioBlogIterators/

 

 

Send us your feedback to appstudiofeedback@esri.com

 

Become an AppStudio for ArcGIS developer! Watch this video on how to sign up for a free trial.

 

Follow us on Twitter @AppStudioArcGIS to keep up-to-date on the latest information and let us know about your creations built using AppStudio to be featured in the AppStudio Showcase.

 

The AppStudio team periodically hosts workshops and webinars; please click on this link to leave your email if you are interested in information regarding AppStudio events.

1. Introduction

 

 

This blog is about the Javascript "for of" loop and the Javascript destructuring assignment.

 

These are part of ECMAScript 6 features that were included in the ECMAScript 7 update of AppStudio 3.3 and Qt 5.12.1.

 

We explore how these features may help with your AppStudio apps.



2. The "for of" loop

 

 

Traditionally, to loop through an array we need to use an index variable (e.g. i):

 

var census = [
    { country: "France", population: 66.99 },
    { country: "Australia", population: 24.6 },
    { country: "United States", population: 327.2 }
]
for (var i = 0; i < census.length; i++) {
    var item = census[i]
    console.log( item.country, item.population )
}

 

 

In ECMAScript 6, we can use "for of" loop to make this easier:

 

let census = [
    { country: "France", population: 66.99 },
    { country: "Australia", population: 24.6 },
    { country: "United States", population: 327.2 }
]
for ( let item of census ) {
    console.log( item.country, item.population )
}

 

 

The "for of" loop is new in ECMAScript 6 and created specifically for looping through arrays and, in general, Javascript iterators.

 


3. Unpacking object values

 

 

Since we know each item have country and population fields, we can use the new ECMAScript destructuring assignment operator to extract it:

 

let census = [
    { country: "France", population: 66.99 },
    { country: "Australia", population: 24.6 },
    { country: "United States", population: 327.2 }
]
for ( let item of census ) {
    let { country, population } = item
    console.log( country, population )
}

 

 

We can even mix destructuring assignment with "for of":

 

let census = [
    { country: "France", population: 66.99 },
    { country: "Australia", population: 24.6 },
    { country: "United States", population: 327.2 }
]
for ( let { country, population } of census ) {
    console.log( country, population )
}

 

 

You can get creative by combining this with arrow functions:

 

let census = [
    { country: "France", population: 66.99 },
    { country: "Australia", population: 24.6 },
    { country: "United States", population: 327.2 }
]
let orderByPopulationDesc = (a, b) => -(a.population - b.population)
for ( let { country, population } of census.sort( orderByPopulationDesc ) ) {
    console.log( country, population )
}



4. Unpacking arrays values

 

 

Similarly, you can unpack arrays using the following destructuring assignment syntax:

 

let [ year, month, day ] = [ "2019", "11", "07" ]
console.log(year) // 2019
console.log(month) // 11
console.log(day) // 07

 

 

 

5. Unpacking regular expression capture groups

 

 

When you use "str.match" with regular expression you get an array of strings. You get additional strings in the array for each capture group. You need to process the array to extract each capture group, e.g.

 

let str = "2019-11-07"
let m = str.match( /(\d{4})-(\d{2})-(\d{2})/ )
console.log( m.length ) // 4
console.log( m[0] ) // 2019-11-07
console.log( m[1] ) // 2019
console.log( m[2] ) // 11
console.log( m[3] ) // 07

 

 

The Javascript destructuring assignment here helps eliminate the need for having an intermediate array variable. The code becomes much shorter and clearer:

 

let str = "2019-11-07"
let [ , year, month, day ] = str.match(/(\d{4})-(\d{2})-(\d{2})/)
console.log( year ) // 2019
console.log( month ) // 11
console.log( day ) // 07

 

 

 

6. Using destructuring assignment with SQL

 

 

In the following example, we see that the destructuring assignment is useful in unpacking results from SQL queries:

 

db.open()
db.query( "CREATE TABLE IF NOT EXISTS countries (country TEXT, population NUMBER)" )
db.query( "INSERT INTO countries VALUES ( 'France', 66.99 )" )
db.query( "INSERT INTO countries VALUES ( 'Australia', 24.6 )" )
db.query( "INSERT INTO countries VALUES ( 'USA', 327.2 )" )
let q = db.query( "SELECT * FROM countries" )
for ( let ok = q.first() ; ok ; ok = q.next() ) {
    let { country, population } = q.values
    console.log( country, population )
}
q.finish()
db.close()

 

 

We can use "for of" syntax here if we make use of Javascript iterator and Javascript generator syntax:

 

function* queryIterator(q) {
    for ( let ok = q.first() ; ok ; ok = q.next() )
        yield q.values
}

db.open()
db.query( "CREATE TABLE IF NOT EXISTS countries (country TEXT, population NUMBER)" )
db.query( "INSERT INTO countries VALUES ( 'France', 66.99 )" )
db.query( "INSERT INTO countries VALUES ( 'Australia', 24.6 )" )
db.query( "INSERT INTO countries VALUES ( 'USA', 327.2 )" )
let q = db.query( "SELECT * FROM countries" )
for ( let { country, population } of queryIterator( q ) ) {
    console.log( country, population )
}
q.finish()
db.close()

 

 

We will talk more about Javascript iterators and Javascript generators in a future blog.

 

 

7. Conclusion

 

 

This blog introduces Javascript "for of" loop and Javascript destructuring assignments.

 

These are some of the new Javascript ECMAScript 7 syntax improvements in AppStudio 3.3 and Qt 5.12.1 that can help you improve your code readability, clarity by helping you write shorter, easier to maintain code.

 

These syntax improvements complement other Javascript improvements, such as Javascript iterators, Javascript generators and Javascript promises.

 

We will introduce Javascript iterators and Javascript generators in a future blog.

 

We will revisit Javascript promises and how they fit with all these Javascript syntax improvements.