Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • John C Scott 473 posts 1183 karma points
    Aug 06, 2016 @ 13:21
    John C Scott

    "Crazy Dream" Node Grid

    I was kept awake last night thinking about a special kind of editor / data type I've always wanted to be able to create. It comes and goes over the years and I'm sure it would be useful, it might sound a bit weird, maybe it's a terrible idea but anyway I finally got myself some sleep by promising myself I'd post more about it tomorrow.

    So I'll start by explaining what I could do and then what it is I wish I could do. Maybe it can already be done? I'll describe a simple example but the principle could be used to do other things more interesting with related data (it'd be very handy if this supported relations too or examine in a simple way).

    Imagine I have a portfolio site, and I want to list all the places I've worked on site. So I have a node structure like:

    • Locations
    • -England
    • -+SouthWest
    • -++Bristol
    • -++Bath
    • -++Chippenham
    • -+SouthEast
    • -++London
    • -++Reading etc.

    What I can do is have a data type on my projects page like a "XML Dropdown Picker" and then pick the location for the project. Then on each of those location pages I can list the projects that have picked that location. So my page: would list

    1. National Milk Records
    2. One Cow Media
    3. Trisoft

    Doesn't have to be a drop down picker, it could be a checkbox list, and then my projects could be on more than one location page.

    OK with me? that's straightforward so far? Ok...

    So what if instead of a picker I could have a datatype?

    So let's say I had a node structure like:

    • Skills
    • -Frontend
    • -+HTML5
    • =+Javascript
    • -Backend
    • -+SQL Server
    • -+C# Development

    Then on each project page I wanted to say a little bit of data, maybe how many hours work I'd done with each thing. So I could select a simple text box or numeric control.

    Now I have a grid where the source of the options to complete would be from a content structure.

    Sometimes it would make sense to present this as columns, sometimes as a table, sometimes I'd want to show all options, or have an XPath that defines only which I want to appear, sometimes it might be more like an "FAQ style" but allow you to select the Q would come from the content context and the A would be entered directly into the datatype in a specified data type (eg text, or number etc.). Configuration of the data type could be really quite simple.

    So then a user could manage a very simple system of referential integrity and the data could be very nice and conceptually simple to navigate.

    Here's where I get stuck. I definitely could not code this on my own. I probably should start with a much simpler data type (yes I've built a few simple grid controls) but if I was going to do this I'd need a lot of feedback about a good safe foundation of how to build it.

    So... here's the questions:

    1. is it a good idea - could it be usable do you think?
    2. would anyone help me build it?
    3. it makes sense to me to use the nuPickers as a starting point to build it from, but does it belong as a part of nuPickers?
    4. will the numeric spinner control and the toggle button from uComponents ever come back!? (ok i'm being silly ignore this one for now)
  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 7x admin c-trib
    Aug 06, 2016 @ 13:32
    Chriztian Steinmeier

    Hi John,

    I'm having trouble visualizing this... do you have any kind of mockups/sketches of what your example could look like?


  • John C Scott 473 posts 1183 karma points
    Aug 06, 2016 @ 13:34
    John C Scott

    I'll make one and return! Possibly not until after my two week holiday that starts today... Do turn on notifications for this thread if you want to see more! :D

  • John C Scott 473 posts 1183 karma points
    Aug 06, 2016 @ 14:05
    John C Scott

    OK so I've made a sketch. I hope it helps you to understand it. I've added some explanatory notes below...

    enter image description here

    On the Front-End content page all of the projects that include some information about front end are listed. On the Angular page all the projects which include some information about Angular are listed.

    On each project page all of the technologies used are listed for each project with their short text description.

    A data type on project page allows you to select a technology from the tree and add a short bit of text about how it was used.

  • John C Scott 473 posts 1183 karma points
    Aug 06, 2016 @ 14:21
    John C Scott

    In the example above we allowed the user to select from anything in the "Technology" tree and add some notes to it, they didn't need to add notes for everything just the ones they chose to.

    I've done another sketch where you might want to constrain the user a little bit more with the example of column or row layouts. This shows three data types on the tab.

    (notes below)

    enter image description here

    In the first two data types they've been configured to show a column layout for two different xpaths to the content tree at a specific level and are required to enter a number for each of the items at that level.

    In the third data type it's a row type layout but again they have to enter some text for each item at that level in the content tree.

    In the first example posted earlier they had the option of choosing which node they wanted to provide info against and then providing the information in a pre-determined data type.

    The real purpose of this is to make it easy for the user to update their "taxonomy" if they are a user with permission to edit that part of the tree.

    It also then makes it easy to provide more than one structured route to the data whilst eliminating a lot of repetition.

    This probably could be achieved by creating lots of sub nodes and having a content picker, but that's ugly and difficult to use, a nice angular data type with properties that were easily indexed would be much more usable.

  • Laurence Gillian 600 posts 1219 karma points
    Aug 08, 2016 @ 14:39
    Laurence Gillian

    I think I understand, at quite a basic level, you are looking to be able to select Nodes, and store data using the Node ID as the Key.


       nodeId: key,
       data: "value, I could be anything"
        nodeId: "Angular"
        data: "Grid had custom angular code to..."

    You could store the data in different ways...

    data: 123 // int
    data: "string" // >.> string ;-)
    data: [ 1 , 2 , 3 ] // array
    data: 1010 // even another nodeId

    And use some Angular magic to render out those different data types...

    This could be stored as a blob of JSON - on a single property - on your content node.

    You would need a data-type, that could be configured for the node selection part (XPATH) and the 'allowed' data values. This could probably be configured using a JSON file that was then parsed.

    For the rendering, you could dynamically do something to the JSON in the view, or cast strongly into a Object Model. It's possible you could do something with the new Models Builder stuff, but I've not played with this yet, so I've no idea how extensible this is , etc, etc, etc!

Please Sign in or register to post replies

Write your reply to: