I want to add a treeview menu in the left side of my application like xcode treeview menu in the leftside. I didn't find any treeview ment element in the object container of xcode. Can anyone suggest me how to do it.
I am using Xcode 9.3 and swift 4.
Where is your problem ?
- data structure management ?
- display ?
- user interaction
The way I would do it would be :
- define the data structure to hold the tree
There are many tutorials for it, as. h ttps://www.raywenderlich.com/1053-swift-algorithm-club-swift-tree-data-structure
- create a tableView to hold data
- cell display indentation depends on the level in hierarchy
- each cell that is not a final leaf should show an arrow on the left to expand / reduce
Actually i have the json object array which i am getting from API. I want to know how to manage the data in a proper structure to bind in the tableview. Can you suggest me waht are the UI elements required to create the treeview in UI.
In general, the UI element that you're calling a tree view is called an outline view in Cocoa, specifically NSOutlineView.
Specifically, though, the sidebar UI element you're referring to is a "source list", which is a special style of outline view.
Thank you, one more thing i would ask. Actually i have the json array as below:
{
"exams": [
{
"examID": "EX0000018",
"startDatetime": "2018-08-06T11:00:00",
"endDatetime": "2018-12-25T02:00:00",
"category": "SP001",
"examName": "Terminal-1",
"examCode": "Terminal-1",
"batch": "JUN-2014",
"course": "GMBA",
"subject": "FINANCE",
"duration": 3,
"fullMarks": 100,
"downloadLink": "EX0000018.zip",
"semester": "1",
"program": "CO0000001",
"specialization": "SP001",
"examType": 2,
"resultType": 2,
"schoolID": "BS00001",
"examScheduleID": "ES000000025",
"questionPaperID": "QP000000024",
"instructionID": "EI000000004",
"batchID": "BA000000001",
"courseID": "CO0000001",
"subjectID": "SB00008",
"passMark": null,
"createdBy": "LU000000019",
"createdOn": "2018-08-07T13:19:07",
"updatedBy": "LU000000019",
"updatedOn": "2018-08-07T13:19:07"
},
{
"examID": "EX0000019",
"startDatetime": "2018-08-17T06:45:00",
"endDatetime": "2018-12-25T02:00:00",
"category": "SP001",
"examName": "Final Term-3",
"examCode": "Final Term-3",
"batch": "JUN-2014",
"course": "GMBA",
"subject": "FINANCE",
"duration": 3,
"fullMarks": 60,
"downloadLink": "EX0000019.zip",
"semester": "3",
"program": "CO0000001",
"specialization": "SP001",
"examType": 2,
"resultType": 2,
"schoolID": "BS00001",
"examScheduleID": "ES000000026",
"questionPaperID": "QP000000025",
"instructionID": "EI000000004",
"batchID": "BA000000001",
"courseID": "CO0000001",
"subjectID": "SB00008",
"passMark": null,
"createdBy": "LU000000019",
"createdOn": "2018-08-07T13:37:41",
"updatedBy": "LU000000019",
"updatedOn": "2018-08-07T13:37:41"
},
{
"examID": "EX0000031",
"startDatetime": "2018-11-17T01:00:00",
"endDatetime": "2018-12-20T03:00:00",
"category": "SP001",
"examName": "Final Term- Nov 2018",
"examCode": "FTN00012",
"batch": "JUN-2014",
"course": "MCA",
"subject": "Java",
"duration": 1,
"fullMarks": 2,
"downloadLink": "EX0000031.zip",
"semester": "3",
"program": "CO0000010",
"specialization": "SP001",
"examType": 2,
"resultType": 2,
"schoolID": "BS00001",
"examScheduleID": "ES000000041",
"questionPaperID": "QP000000033",
"instructionID": "EI000000002",
"batchID": "BA000000001",
"courseID": "CO0000010",
"subjectID": "SB00071",
"passMark": 0,
"createdBy": "LU000000011",
"createdOn": "2018-11-16T07:57:29",
"updatedBy": "LU000000011",
"updatedOn": "2018-11-16T08:06:46"
}
],
"eotp": [
{
"mappingID": "EM000000161",
"studentID": "ST000000195",
"examID": "EX0000018",
"examDone": 0,
"answerID": "ST000000195_EX0000018",
"otp": "874059",
"metaData": "ew0KICAiZmFjdWx0eSI6ICJzdWNoaXNuaXRhIG5heWFrIiwNCiAgImNyZWF0aW9uX2RhdGUiOiAiMDcvMDgvMjAxOCIsDQogICJjcmVhdGlvbl90aW1lIjogIjAxOjE5IFBNIiwNCiAgImZpbGVfZW50cmllcyI6IFtdLA0KICAic3VibWl0X3RpbWUiOiAiMTE6NDcgQU0iLA0KICAiZXhhbV9kYXRlIjogIjA4LzA4LzIwMTgiLA0KICAiaW5zdGl0dXRlX25hbWUiOiAiQlMwMDAwMSIsDQogICJ0b3RhbF9tYXJrcyI6ICIxMDAiLA0KICAic3R1ZGVudF9uYW1lIjogIlJBVkkgVkFSTUEiLA0KICAic3R1ZGVudF9yZWciOiAiVU5PWDAwMSIsDQogICJzZW1lc3RlciI6ICIxIiwNCiAgImJhdGNoIjogIkpVTi0yMDE0IiwNCiAgImV4YW1fbmFtZSI6ICJUZXJtaW5hbC0xIiwNCiAgImV4YW1fY29kZSI6ICJUZXJtaW5hbC0xIiwNCiAgImV4YW1fdHlwZSI6ICJDbG9zZSBCb29rIg0KfQ==",
"ansConfirmation": "143059",
"qpDownloaded": 0,
"roomID": "0",
"seatNo": 0,
"invigilatorID": "0"
},
{
"mappingID": "EM000000168",
"studentID": "ST000000195",
"examID": "EX0000019",
"examDone": 0,
"answerID": "ST000000195_EX0000019",
"otp": "458362",
"metaData": "ew0KICAiZmFjdWx0eSI6ICJzdWNoaXNuaXRhIG5heWFrIiwNCiAgImNyZWF0aW9uX2RhdGUiOiAiMDcvMDgvMjAxOCIsDQogICJjcmVhdGlvbl90aW1lIjogIjAxOjM3IFBNIiwNCiAgImZpbGVfZW50cmllcyI6IFtdLA0KICAic3VibWl0X3RpbWUiOiAiMTI6MDUgUE0iLA0KICAiZXhhbV9kYXRlIjogIjA3LzA4LzIwMTgiLA0KICAiaW5zdGl0dXRlX25hbWUiOiAiQlMwMDAwMSIsDQogICJ0b3RhbF9tYXJrcyI6ICI2MCIsDQogICJzdHVkZW50X25hbWUiOiAiUkFWSSBWQVJNQSIsDQogICJzdHVkZW50X3JlZyI6ICJVTk9YMDAxIiwNCiAgInNlbWVzdGVyIjogIjMiLA0KICAiYmF0Y2giOiAiSlVOLTIwMTQiLA0KICAiZXhhbV9uYW1lIjogIkZpbmFsIFRlcm0tMyIsDQogICJleGFtX2NvZGUiOiAiRmluYWwgVGVybS0zIiwNCiAgImV4YW1fdHlwZSI6ICJDbG9zZSBCb29rIg0KfQ==",
"ansConfirmation": "630427",
"qpDownloaded": 0,
"roomID": "0",
"seatNo": 0,
"invigilatorID": "0"
},
{
"mappingID": "EM000000203",
"studentID": "ST000000195",
"examID": "EX0000031",
"examDone": 0,
"answerID": "ST000000195_EX0000031",
"otp": "532480",
"metaData": null,
"ansConfirmation": "0",
"qpDownloaded": 0,
"roomID": "0",
"seatNo": 0,
"invigilatorID": "0"
},
{
"mappingID": "EM000000204",
"studentID": "ST000000195",
"examID": "EX0000030",
"examDone": 0,
"answerID": "EM000000204_EX0000030",
"otp": "541245",
"metaData": null,
"ansConfirmation": "569856",
"qpDownloaded": 0,
"roomID": "0",
"seatNo": 0,
"invigilatorID": "0"
}
]
}Now i declared my outlet as below:
@IBOutlet weak var QuestionOutlineView: NSOutlineView!Can you tell me how to bind the json object to this outline view please.
What do you want to show in the list ? What is the top level ? List of exams ? List of eotp ?
There are good tutorials on how to use NSOutlineView.
Look here and adapt:
h ttps://www.raywenderlich.com/1201-nsoutlineview-on-macos-tutorial
Thank you buddy 🙂.
I use SwiftListTreeDataSource to visualise hierarchical data structures (trees) in lists-like way. It's UI agnostic, just like view-model, so you can use it with UITableView/UICollectionView/NSTableView or even SwiftUI and search is also supported.