Display Array in popup window / dialog box

I have an array and I need a way to relay this information back to the user. I am creating a GIS application and the results are from a user click on the map and identifying features...

This is what I get back from the user click....

[{"objectid":3255,"idcount":"private","userid":"gat e","Surveyed":null,"class":null},{"objectid":3256, "idcount":"public","userid":"parking","Surveyed":" kjkjhkjhkjhkhjkhj","class":"yujjhjhkjh"},{"objecti d":3257,"idcount":"private","userid":"fishing spot","Surveyed":null,"class":null},{"objectid":36 55,"idcount":"public","userid":"parking","Surveyed ":"kjkjhkjhkjhkhjkhj","class":"yujjhjhkjh"}]

What I am trying to create is a popup/dialog window of some sort that:

1. Displays only one record at a time.
2. Have an arrow of some sort at the top that allows the user to flip through the multiple records.

I am very new to this and looking for suggestions and/or examples. Think I have to convert the array to a ListView or ListModel? Looking for a javascript solution.

Any thoughts?

Hi, if you have only these five entries (objectid, idcount, ...), you could simply design a dialog with a few QLabels or QLineEdits to display the content.

Ginsengelf

SORRY FOR ALL THE CODE....I Don't know how else to explain myself...

OK I have tried this 2 ways...

Below you can see that:
1 . I am grabbing a returned array and braking it up into a variable msgText3 in a For Loop.

[{"objectid":5,"idcount":"public","userid":"parking ","Surveyed":"boat","class":"777jjj7u"},{"objectid ":2455,"idcount":"private","userid":"fishing spot","Surveyed":null,"class":null}]

Attachment 13201

2. I am also writing the results to global variables (ex msgvobjectid ) in this FOR loop

Attachment 13200



In the first example above I can take the array and push it to a variable and get that to display in a dialog box that I can scroll through the records.

In the second example above I shot myself in the foot because I am only setting the variable with the last record that passes through the For loop. So while the Update Window code below has it nicely formatted it only shows me the last record that goes through the FOR loop.



What I am after is a dialog box of some sort that gives me 1 record at a time and has an arrow or flip that I can flip through all the records...I dont want to scroll.
I would love to see something like the second example above but have a flickabe screen to filter through the rest of the results...

Can I send the array to a list model and then use that list model in a popup at allows for flicking through the results?


Sort of stuck at this point




// SNIP

var msgText3 = ""

for (var i = 0; i < results.length; i++) {
var result = results[i];
var count = geoElementsCountFromResult(result);
var layerName = result.layerContent.name;

// GO BUILD THE ARRAY
var returnarray = geoElementsGetElements(result);

for (var e = 0; e < returnarray.length; e++) {

var msgText3 = ""
msgText3 += "\n" + headerText + "\n"
+ "objectid: " + returnarray[e].objectid + "\n"
+ "item: " + returnarray[e].userid + "\n"
+ "pub/priv: " + returnarray[e].idcount + "\n"
+ "comments: " + returnarray[e].Surveyed + "\n"
+ "case num: " + returnarray[e].class + "\n"
+ "--------------------"+ "\n";
console.log(msgText3);


msgvobjectid = returnarray[e].objectid;
msgvidcount = returnarray[e].userid;
msgvuserid = returnarray[e].idcount;
msgvSurveyed = returnarray[e].Surveyed;
msgvclass = returnarray[e].class;

}

// add new line character if not the final element in array
if (i !== results.length)
msgText3 += "\n";

}


// SNIP


function geoElementsGetElements(identifyLayerResult) {
// create temp array
var tempResults = [identifyLayerResult];
var identifyResult2 = tempResults[index];

// use Depth First Search approach to handle recursion
var count = 0;
var index = 0;

var vobjectid = "";
var vidcount = "";
var vuserid = "";
var vSurveyed = "";
var vclass = "";

var arrayName = [];
var NewObject = {};

// DEFINE ARRAY VARIABLES
var arr = [];

// create an array to store the features
var identifiedObjects = [];

for (var i = 0; i < identifyResult2.geoElements.length; i++){

var elem = identifyResult2.geoElements[i];
identifiedObjects.push(elem);

vobjectid = identifyResult2.geoElements[i].attributes.attributeValue("objectid")
vidcount = identifyResult2.geoElements[i].attributes.attributeValue("PublicPrivate")
vuserid = identifyResult2.geoElements[i].attributes.attributeValue("Item")
vSurveyed = identifyResult2.geoElements[i].attributes.attributeValue("Comments")
vclass = identifyResult2.geoElements[i].attributes.attributeValue("CaseNum")

arrayName = [vobjectid, vidcount, vuserid, vSurveyed, vclass]

// BUILD THE ARRAY
var obj = {};
obj['objectid'] = vobjectid;
obj['idcount'] = vidcount;
obj['userid'] = vuserid;
obj['Surveyed'] = vSurveyed;
obj['class'] = vclass;
arr.push(obj);

return arr
}

HERE IS THE DIALOG BOX AND MESSAGE BOX CODE


I THEN TRY AND RETURN THOSE RESULTS.... I push to a DIALOG box and TO what I call an UPDATE WINDOW BOTH EXAMPLES ARE BELOW.

I push the msgText3 array to a Dialog as seen below...

I can see all the records and scroll through them in the dialog window.

Dialog {
id: msgDialog
property alias text : textLabel.text
width: 300
height: 250
x: Math.round(parent.width - width) / 2
y: Math.round(parent.height - height) / 2

Rectangle {
id: frame
clip: true
width: msgDialog.width * .90
height: msgDialog.height * .85
anchors.left: parent.left

Text {
id: textLabel
width: frame.width
height: frame.height
text: msgText3
font.pixelSize: 10
x: -hbar.position * frame.width
y: -vbar.position * frame.height * 4 // This allows me to see the whole list
}

ScrollBar {
id: vbar
hoverEnabled: true
active: hovered || pressed
orientation: Qt.Vertical
size: frame.height / content.height
//size: frame.height
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
}

ScrollBar {
id: hbar
hoverEnabled: true
active: hovered || pressed
orientation: Qt.Horizontal
size: frame.width / content.width
//size: frame.width
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
}





ALTERNATIVELY I am pushing the individual variables into what I am calling the update window.



// Update Window
Rectangle {
id: updateWindow
width: 320
height: 230
anchors.centerIn: parent
radius: 10
visible: false

GaussianBlur {
anchors.fill: updateWindow
source: mapView
radius: 40
samples: 20
}

MouseArea {
anchors.fill: parent
onClicked: mouse.accepted = true;
onWheel: wheel.accepted = true;
}

GridLayout {
columns: 2
anchors.margins: 5

Text {
Layout.columnSpan: 2
text: " "
font.pixelSize: 30
}

Text {
Layout.columnSpan: 1
Layout.margins: 2
text: "objectid : "
font.pixelSize: 16
leftPadding: 10
}
Rectangle{
id: myTextField_objectid
color: "white"
width: 200
anchors.leftMargin: 100
height:25
radius: 5
Layout.columnSpan: 1
Layout.margins: 2
Layout.fillWidth: true
Text{
id:txt_objectid
text: " " + msgvobjectid
anchors.leftMargin: 100
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignLeft
font.family: "helvetica"
font.pointSize: 12
}
}
Text {
Layout.columnSpan: 1
Layout.margins: 2
text: "idcount : "
font.pixelSize: 16
leftPadding: 10
}
Rectangle{
id: myTextField_idcount
color: "white"
anchors.leftMargin: 10
height:25
radius: 5
Layout.columnSpan: 1
Layout.margins: 2
Layout.fillWidth: true
Text{
id:txt_idcount
text: " " + msgvidcount
anchors.leftMargin: 10
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignLeft
font.family: "helvetica"
font.pointSize: 12
}
}
Text {
Layout.columnSpan: 1
Layout.margins: 2
text: "userid : "
font.pixelSize: 16
leftPadding: 10
}
Rectangle{
id: myTextField_msgvuserid
color: "white"
anchors.leftMargin: 10
height:25
radius: 5
Layout.columnSpan: 1
Layout.margins: 2
Layout.fillWidth: true
Text{
id:txt_msgvuserid
text: " " + msgvuserid
anchors.leftMargin: 10
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignLeft
font.family: "helvetica"
font.pointSize: 12
}
}
Text {
Layout.columnSpan: 1
Layout.margins: 2
text: "surveyed : "
font.pixelSize: 16
leftPadding: 10
}
Rectangle{
id: myTextField_msgvSurveyed
color: "white"
anchors.leftMargin: 10
height:25
radius: 5
Layout.columnSpan: 1
Layout.margins: 2
Layout.fillWidth: true
Text{
id:txt_msgvSurveyed
text: " " + msgvSurveyed
anchors.leftMargin: 10
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignLeft
font.family: "helvetica"
font.pointSize: 12
}
}
Text {
Layout.columnSpan: 1
Layout.margins: 2
text: "class : "
font.pixelSize: 16
leftPadding: 10
}
Rectangle{
id: myTextField_msgvclass
color: "white"
anchors.leftMargin: 10
height:25
radius: 5
Layout.columnSpan: 1
Layout.margins: 2
Layout.fillWidth: true
Text{
id:txt_msgvclass
text: " " + msgvclass
anchors.leftMargin: 10
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignLeft
font.family: "helvetica"
font.pointSize: 12
}
}


}
} // END OF UPDATE WINDOW

OK sorry for the mess in the last post....I did some modifying and changed my approach

I know this is a mapping application but this boils down to grabbing an array and displaying it....
In this approach I call a function and populate an array and then append the array line by line in the FOR loop to the ListModel
This list model is then referenced in the ListView and as such displays the records as seen below.


Attachment 13203

This is working...and in the example you can see that two records are returned.
BUT what I want to do is return them one at a time and have the ability to flick through them or have an arrow icon to flip through them.
NOT see them one after another as in the image.

My question is how do I do this????? Any suggestions would be appreciated....





// WHEN THE USER CLICKS THE MAP THIS IS CALLED WHICH IN TUNR CALLS THIS FUNCTION: geoElementsGetElements(result);
onIdentifyLayersStatusChanged: {

if (identifyLayersStatus !== Enums.TaskStatusCompleted)
return;

msgvobjectid = "";
msgvidcount = "";
msgvuserid = "";
msgvSurveyed = "";
msgvclass = "";

// loop through the results
var results = mapView.identifyLayersResults;

for (var i = 0; i < results.length; i++) {
var result = results[i];

var returnarray = geoElementsGetElements(result);

for (var e = 0; e < returnarray.length; e++) {

msgvobjectid = returnarray[e].objectid;
msgvidcount = returnarray[e].userid;
msgvuserid = returnarray[e].idcount;
msgvSurveyed = returnarray[e].Surveyed;
msgvclass = returnarray[e].class;

speedModel.append({objectid:msgvobjectid,idcount:m sgvidcount,userid:msgvuserid,Surveyed:msgvSurveyed });

}
}
}


// FUNCTION THAT IS CALLED THAT CREATES THE ARRAY AND SENDS BACK
function geoElementsGetElements(identifyLayerResult) {
// create temp array
var tempResults = [identifyLayerResult];

var vobjectid = "";
var vidcount = "";
var vuserid = "";
var vSurveyed = "";
var vclass = "";

var arrayName = [];
var identifyResult2 = tempResults[index];

// DEFINE ARRAY VARIABLES
var arr = [];

// create an array to store the features
var identifiedObjects = [];

for (var i = 0; i < identifyResult2.geoElements.length; i++){

var elem = identifyResult2.geoElements[i];
identifiedObjects.push(elem);

vobjectid = identifyResult2.geoElements[i].attributes.attributeValue("objectid")
vidcount = identifyResult2.geoElements[i].attributes.attributeValue("PublicPrivate")
vuserid = identifyResult2.geoElements[i].attributes.attributeValue("Item")
vSurveyed = identifyResult2.geoElements[i].attributes.attributeValue("Comments")
vclass = identifyResult2.geoElements[i].attributes.attributeValue("CaseNum")

arrayName = [vobjectid, vidcount, vuserid, vSurveyed, vclass]

// BUILD THE ARRAY
var obj = {};
obj['objectid'] = vobjectid;
obj['idcount'] = vidcount;
obj['userid'] = vuserid;
obj['Surveyed'] = vSurveyed;
obj['class'] = vclass;
arr.push(obj);

}
return arr
}


// CREATE THE LIST MODEL
ListModel {
id: speedModel
Component.onCompleted: {
[
{"objectid":0,
"idcount":"",
"userid":"",
"Surveyed":""}
]
}
}

// CREATE THE DIALOG AND LISTVIEW THAT WILL SHOW THE RECORDS[/COLOR]
Dialog {
id: msgDialog
modal: true
title: headerCount
font.pixelSize: 10
width: 300
height: 250

// POSITION OF msgDialog
x: Math.round(parent.width - width) / 2
y: Math.round(parent.height - height) / 2


Rectangle {
id: inside
width: msgDialog.width * .9; height: 125

Component {
id: contactDelegate
Item {
width: 180; height: 70
Column {
Text { text: '<b>ObjectID:</b> ' + objectid }
Text { text: '<b>idcount: </b> ' + idcount }
Text { text: '<b>userid: </b> ' + userid }
Text { text: '<b>idcount: </b> ' + Surveyed }
}
}
}

ListView {
anchors.fill: inside
model: speedModel
delegate: contactDelegate
//highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
focus: true
}
}

I would suggest editing these posts and using code tags to mark code.

Much easier to read.

Cheers,
_

Will do so from no on....was looking for the tags in the toolbar but did not see them....and I dont see an option to go back and edit my post to add them...

Here is my code from the last post with Code tags...found them...sorry about that...

As I stated I am looking to have all the records returned but ONLY view 1 record at a time and allow for a vertical or horizontal swipe....

Code:

---

// WHEN THE USER CLICKS THE MAP THIS IS CALLED WHICH IN TUNR CALLS THIS FUNCTION: geoElementsGetElements(result);
 
            onIdentifyLayersStatusChanged: {
 
                if (identifyLayersStatus !== Enums.TaskStatusCompleted)
                    return;
 
                msgvobjectid = "";
                msgvidcount = "";
                msgvuserid = "";
                msgvSurveyed = "";
                msgvclass = "";
 
                // loop through the results
                var results = mapView.identifyLayersResults;
 
                for (var i = 0; i < results.length; i++) {
                    var result = results[i];
                    var count = geoElementsCountFromResult(result);
                    var layerName = result.layerContent.name;
 
                    var returnarray = geoElementsGetElements(result);
 
                    for (var e = 0; e < returnarray.length; e++) {
 
                        msgvobjectid = returnarray[e].objectid;
                        msgvidcount = returnarray[e].userid;
                        msgvuserid = returnarray[e].idcount;
                        msgvSurveyed = returnarray[e].Surveyed;
                        msgvclass = returnarray[e].class;
 
                        speedModel.append({objectid:msgvobjectid,idcount:msgvidcount,userid:msgvuserid,Surveyed:msgvSurveyed});
 
                    }
 
                }
 
 
// FUNCTION THAT IS CALLED THAT CREATES THE ARRAY AND SENDS BACK
            function geoElementsGetElements(identifyLayerResult) {
                // create temp array
                var tempResults = [identifyLayerResult];
 
                var vobjectid = "";
                var vidcount = "";
                var vuserid = "";
                var vSurveyed = "";
                var vclass = "";
 
                var arrayName = [];
 
                var identifyResult2 = tempResults[index];
 
                // DEFINE ARRAY VARIABLES
                var arr = [];
 
                for (var i = 0; i < identifyResult2.geoElements.length; i++){
 
                    var elem = identifyResult2.geoElements[i];
                    identifiedObjects.push(elem);
 
                    vobjectid = identifyResult2.geoElements[i].attributes.attributeValue("objectid")
                    vidcount = identifyResult2.geoElements[i].attributes.attributeValue("PublicPrivate")
                    vuserid = identifyResult2.geoElements[i].attributes.attributeValue("Item")
                    vSurveyed = identifyResult2.geoElements[i].attributes.attributeValue("Comments")
                    vclass = identifyResult2.geoElements[i].attributes.attributeValue("CaseNum")
 
                    arrayName = [vobjectid, vidcount, vuserid, vSurveyed, vclass]
 
                   // BUILD THE ARRAY
                    var obj = {};
                    obj['objectid'] = vobjectid;
                    obj['idcount'] =  vidcount;
                    obj['userid'] =  vuserid;
                    obj['Surveyed'] = vSurveyed;
                    obj['class'] = vclass;
                    arr.push(obj);
 
                }
 
                return arr
            }
 
 
 
 
// CREATE THE LIST MODEL
            ListModel {
                id: speedModel
                Component.onCompleted: {
                    [
                    {"objectid":0,
                      "idcount":"",
                      "userid":"",
                      "Surveyed":""}
                    ]
                }
            }
 
// CREATE THE DIALOG AND LISTVIEW THAT WILL SHOW THE RECORDS
 
 
           Dialog {
                id: msgDialog
                modal: true
                title: headerCount
                font.pixelSize: 10
                //standardButtons: Dialog.Ok
 
                //property alias text : textLabel.text
                width: 300
                height: 250
 
                // POSITION OF msgDialog
                x: Math.round(parent.width - width) / 2
                y: Math.round(parent.height - height) / 2
 
                Rectangle {
                    id: inside
                    width: msgDialog.width * .9; height: 180
                    anchors.fill: parent
                    border.color: "black"
                    border.width: 5
                    Component {
                        id: contactDelegate
                        Item {
                            width: 180; height: 160
                            Column {
                                Text { text: '<b>ObjectID:</b> ' + objectid }
                                Text { text: '<b>idcount: </b> ' + idcount }
                                Text { text: '<b>userid:   </b> ' + userid }
                                Text { text: '<b>idcount: </b> ' + Surveyed }
                                Text { text: '-------------'  }
                            }
                        }
                    }
 
                    ListView {
                        anchors.fill: inside
                        flickableDirection: Flickable.VerticalFlick
                        model: speedModel
                        delegate: contactDelegate
                        //highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
                        focus: true
                    }
               }
           }

---