AppStudio Workshop Spring 2020 Questions

[ChrisLeSueur]

Use this discussion thread to ask questions that you would like answered during the AppStudio Workshop 2020. Use the "Add a Reply" button below to ask your question and we will either answer the question in this thread of discuss it at our next workshop session.

[Chenna_KishoreMallemala]

Thank you Tina for your guidance.

The following code change in panelPage.qml was able to display the popup from webmap.

 //featuresView.layerName = popupManager.objectName
                        featuresView.layerName = popupManager.popup.title
                        var popupwebfields = popupManager.popup.popupDefinition.fields
                        var popupModel = popupManager.displayedFields
                        if (popupModel.count) {
                            var feature1 = mapView.identifyProperties.features[currentPageNumber-1]
                            var attributeJson1 = feature1.attributes.attributesJson
                            attrListModel.clear()
                            for(var key in attributeJson1)
                            {
//                                if(attributeJson1.hasOwnProperty(key))
//                                {
//                                    attrListModel.append({
//                                                             "label": key,
//                                                             "fieldValue": attributeJson1[key]!== null?attributeJson1[key].toString():null
//                                                         })
//                                }
                                for(var cnt = 0; cnt < popupwebfields.length; cnt++){
                                    var key1 = popupwebfields[cnt]
                                    if(key1.visible === true && key1.fieldName === key){
                                        attrListModel.append({

                                                                 "label": key1.label,
                                                                 "fieldValue": attributeJson1[key]!== null?attributeJson1[key].toString():null
                                                             })
                                        break
                                    }
                                }

                            }
                            return attrListModel
                            //return popupManager.displayedFields‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[MervynLotter]

Dear Mallemala Kishore

I would also really like the webmap popups to be honoured in my MapViewer app.  You seem to have modified the code to get it to work.

Can you please provide a bit more details as to where in the PanelPage.qml you made these changes?

Did you also need to make changes to the IdentifyFeaturesView.qml?

Thank you

[Chenna_KishoreMallemala]

Hi Mervyn,

You have to change only in PanelPage.qml. navigate to:

Component {
        id: identifyFeaturesView‍‍

section and replace the function 

function bindModel () {‍

with following code:

            function bindModel () {
                featuresView.model = Qt.binding(function () {
                    try {
                        //Custome Code
                        console.log("attributes",
                        JSON.stringify(mapView.identifyProperties.features[currentPageNumber-1].geometry.json));
                        var spatialReference = ArcGISRuntimeEnvironment.createObject("SpatialReference", {wkid: 4326});
                        var projectedPoint = GeometryEngine.project(mapView.identifyProperties.features[currentPageNumber-1].geometry, spatialReference);
                        console.log("projectedPoint", JSON.stringify(projectedPoint.json));
                        featuresView.directionLat = projectedPoint.y;
                        featuresView.directionLong = projectedPoint.x;
                        // Custome Code Ends

                        var popupManager = mapView.identifyProperties.popupManagers[currentPageNumber-1]
                        //featuresView.layerName = popupManager.objectName
                        featuresView.layerName = popupManager.popup.title
                        var popupwebfields = popupManager.popup.popupDefinition.fields
                        var popupModel = popupManager.displayedFields
                        if (popupModel.count) {
                            var feature1 = mapView.identifyProperties.features[currentPageNumber-1]
                            var attributeJson1 = feature1.attributes.attributesJson
                            attrListModel.clear()
                            for(var key in attributeJson1)
                            {
//                                if(attributeJson1.hasOwnProperty(key))
//                                {
//                                    attrListModel.append({
//                                                             "label": key,
//                                                             "fieldValue": attributeJson1[key]!== null?attributeJson1[key].toString():null
//                                                         })
//                                }
                                for(var cnt = 0; cnt < popupwebfields.length; cnt++){
                                    var key1 = popupwebfields[cnt]
                                    if(key1.visible === true && key1.fieldName === key){
                                        attrListModel.append({

                                                                 "label": key1.label,
                                                                 "fieldValue": attributeJson1[key]!== null?attributeJson1[key].toString():null
                                                             })
                                        break
                                    }
                                }

                            }
                            return attrListModel
                            //return popupManager.displayedFields
                        } else {
                            // This case handles map notes
                            var feature = mapView.identifyProperties.features[currentPageNumber-1]
                            var attributeJson = feature.attributes.attributesJson
                            attrListModel.clear()
                            if (attributeJson.hasOwnProperty("TITLE")) {
                                if (attributeJson["TITLE"]) {
                                    attrListModel.append({
                                                             "label": "TITLE", //qsTr("Title"),
                                                             "fieldValue": attributeJson["TITLE"].toString()
                                                         })
                                }
                            }
                            if (attributeJson.hasOwnProperty("DESCRIPTION")) {
                                if (attributeJson["DESCRIPTION"]) {
                                    attrListModel.append({
                                                             "label": "DESCRIPTION", //qsTr("Description"),
                                                             "fieldValue": attributeJson["DESCRIPTION"].toString()
                                                         })
                                }
                            }
                            if (attributeJson.hasOwnProperty("IMAGE_LINK_URL")) {
                                if (attributeJson["IMAGE_LINK_URL"]) {
                                    attrListModel.append({
                                                             "label": "IMAGE_LINK_URL",
                                                             "fieldValue": attributeJson["IMAGE_LINK_URL"].toString()
                                                         })
                                }
                            }
                            return attrListModel
                        }
                    } catch (err) {
                        featuresView.layerName = ""
                        return defaultListModel
                    }
                })
            }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 This is working fine for my requirements. you can fine tune the code as required.

[MervynLotter]

Thank you so much! I really appreciate the assistance. 

[JohnPinto]

Hi Course Organizers

Please can you explain the usage  of scaleFactor in the Style documentation. Applying the rules distort my widgets. I am not following the rules correctly.

AppStudio sample style guide · Esri/developer-support Wiki · GitHub 

• Properties that take a pixel value should be multiplied by display scale factor to adjust for different DPI devices. The exception to this rule appears to be with our API- it seems that Runtime Core already scales the size of things like Simple Marker Symbols for you, so this step is not needed. A property can be declared at the top of the qml file to use throughout the sample. Be sure to have imported ArcGIS.AppFramework 1.0:

import ArcGIS.AppFramework 1.0  property double scaleFactor: AppFramework.displayScaleFactor

• Items anchored on the side, top, or bottom should have margins set to 10 * scaleFactor
• If you need a panel of 'controls', preferred anchoring is top left corner. Use a column for the controls, and anchor a background grey box to it. In order to maintain the anchoring of 10, you need ot set the anchoring of the column to 20 and then the margin of the background to -10. eg:

Regards

John

[ErwinSoekianto]

John, 

I think this will help you understand the concept of displayScaleFactor in QML, https://community.esri.com/thread/197716-how-to-use-the-displayscalefactor 

Thank you,

Erwin

[MervynLotter]

Dear ApddStudio Team

After configuring some of my webmaps to show in the MapViewer template, I created the executables for Android and Windows 10 desktop. I then installed them on the respective devices. 

I have two questions.

1) When the MapViewer loads in Windows, there does not seem to be a menu option to close the application. Am I missing something? On Android it is easy to just click on teh back button to exit the application.

2) Is it possible to load a static image, like a logo, to the webmap header page? If so, would it be on the Panel.qml or MenuPage.qml control pages? Could you please provide a bit more detail if it is possible?

Thank you

[MervynLotter]

Just to add to with my first question above regarding the difficulty of closing the MapViewer app on a Windows device, it seems to be intermittent. I am running the app on a computer with dual monitors and sometimes the app opens fullscreen without the thin white strip at the top, which does have the option to close the app, other times this strip/header is not present so it it more difficult to close using conventional ways.

I will see if I can reproduce it more reliably. 

[MervynLotter]

I was also able to add a logo to the header Toolbar and ColumnLayout on the GalleryPage and MapPage. They just appear a bit small. 

This was the code I used. Any suggestions as to a better way of doing so or how to increase image size?

Thanks.

        ColumnLayout {

            id: toolBarColumn

            width: parent.width

            spacing: 0

            Item {

                Layout.fillWidth: true

                Layout.preferredHeight: headerRow.height

                RowLayout {

                    id: headerRow

                    height: app.headerHeight

                    spacing: 0

                    Controls.Icon {

                        imageSource: "../images/mtpa2.png"

                        Layout.leftMargin: app.widthOffset

                        Layout.alignment: Qt.AlignVCenter

                        }

[MikeQuetel1]

Hi,

I've got a vector tile package that I'm trying to load into a MapView. The map control is definitely added to the page (building off Tuesday's lab), but I can't get the .vtpk to draw.  Seems like something silly that I'm missing. I'm sure the vector tile package is valid (draws fine in pro, I've published it as a hosted service) and the initial viewpoint should be just within the data area.  Appreciate any pointers.   

Here is the code snipped I'm working with:

        MapView {
            id: mapView

            anchors.fill: parent

            Map {
                id: map

                Basemap {

                    ArcGISVectorTiledLayer {
                        id: vectorbasemap
                        url: AppFramework.userHomePath +  "/ArcGIS/Runtime/Data/Basemap_Color_Complete_Vector.vtpk"
                    }
                }

                initialViewpoint: ViewpointCenter {
                    id: initialViewpoint
                    center: Point {
                        x: 13647642.0
                        y: 5703059.0
                        spatialReference: SpatialReference {wkid: 3857}
                    }
                    targetScale: 72224.0
                }
            }
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

which results in this:

The data location should be fine, I think:

This is what the same tile package looks like in pro:

Thanks for the workshop, it's been great and helping to give me the push I needed.   AppStudio, AppStudio Player and Qt/QML are (for some reason) more attractive to me than Xamarin... and that's coming from a .NET developer.