We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 34162
    • 1 Posts
    This is an auto-generated topic for <a href="extras/package/661">SIMPLX Widgeteer 0.1-beta</a> by larscwallin.

    Brief Description:
    More and more data on the web, as well as on local systems, are available through descriptive formats as xml and json. Such formats can be used to display data from other systems, such as news updates etc.

    Displaying, or rendering, information in a json feed takes parsing of the json data, extracting relevant data and inserting this data into some kind of template document.



    This is where the Widgeteer steps in and keeps it SIMPLX!



    The Widgeteer takes a very pleasent Modxish way to accomplish this: chunkMatching.

    Consider the following json string:



    -----------------------------------------------------------------------------------------------------------------------



    {

    "source":"modx",

    "result":[

    {"id":"1","type":"document","pagetitle":"JSON Test","description":"Simple demo of json"},

    {"id":"2","type":"document","pagetitle":"JSON Test 2","description":"Simple demo of json 2"}

    ]

    }



    -----------------------------------------------------------------------------------------------------------------------



    This is a very simplified json representing two pages in ModX.

    First of all, as soon as you spot the char "{" its the start of a new json object representation. Consequently

    "}" finishes an object.



    The first object in the json string above only has two attributes: "source", "result".

    "source" has the value "modx". The "result" attribute though is followed by "[". This sign represents the

    start of an array of json objects, in this case ModX documents.



    Widgeteer calls the "result" attribute "dataSetRoot", in other words the element which holds the array of

    data we want to render.



    Ok, lets look at a Widgeteer Snippet call:



    -----------------------------------------------------------------------------------------------------------------------



    [!SIMPLX_Widgeteer?

    dataSet=`{"source":"modx","result":[{"id":"1","type":"document","pagetitle":"JSON Test","description":"Simple demo of json"},{"id":"2","type":"document","pagetitle":"JSON Test 2","description":"Simple demo of json 2"}]}`

    &dataSetRoot=`result`

    &useChunkMatching=true

    &chunkMatchingSelector=`type`

    &chunkPrefix=`test.`!]



    -----------------------------------------------------------------------------------------------------------------------



    This call tells the Snippet:

    1. to load a dataSet of json data.

    2. to use the "result" element as root,

    3. to automatically match json objects to Chunks,

    4. which field in the json object to match Chunks with,

    5. if we use a prefix in the Chunk name ("test.document" in this example)



    The Snippet will now parse through the "result" array and for each object in the array it will try to find a matching

    ModX Chunk using the chunkPrefix + chunkMatchingSelector. If it finds a matching Chunk it will take the whole json

    object and replace the placeholders ([+field_name+]) with the corresponding fields.



    A matching Chunk (named "test.document") for the above call could look like this:



    -----------------------------------------------------------------------------------------------------------------------



    <div>

    <p>

    <b>[+pagetitle+]</b>

    </p>

    <p>

    [+desription+]




    <a href="?id=[+id+]">Read more...</a>

    </p>



    </div>



    -----------------------------------------------------------------------------------------------------------------------



    The Widgeteer can load data from,

    1. a static data set, like in the previous example

    2. a Snippet or a Chunk

    3. an url to any valid json feed (using the dataSourceUrl parameter)





    The parameters:



    "dataSourceUrl" - An url to any valid json source (uses CURL)

    "dataSet" - If no dataSourceUrl is specified a json string is expected here

    "useChunkMatching" - true/false decides if Widgeteer should try to match Chunks

    "chunkMatchingSelector" - If the useChunkMatching is set to true a json lookup field is expected here

    "staticChunkName" - If useChunkMatching is set to false, a Chunk name is expected there (will be applied to all json objects)

    "dataSetRoot" - The json array which holds the objects to parse. Adjust according to json format.

    "chunkMatchRoot" - true/false, if set to true Widgeteer will try to find a matching Chunk for the dataSetRoot property and wrap results in this.

    "chunkPrefix" - The prefix alows you to match the same type of json object differently depending on context. Very handy.



    -----------------------------------------------------------------------------------------------------------------------

      • 16681
      • 62 Posts
      Hi,

      The Chunk example above should of course be:

      <div>
      <p>
      <b>[+pagetitle+]</b>
      </p>
      <p>
      [+desription+]
      <a href="?id=[+id+]">Read more...</a>
      </p>
      </div>
        Keep it SIMPLX
        • 16681
        • 62 Posts
        Hi again,

        This version of SIMPLX Widgeteer lets you parse and display data from any system or website with minimum config and hassle.

        I personally use it to list resources, images and rss.
        Widgeteer makes it really easy to display output from one Snippet in many ways. Consider the following:

        <?php
        
        $parentid = isset($parentid) ? $parentid : 0;
        
        $query_result = $modx->db->query('SELECT id, type, pagetitle, longtitle, introtext AS summary, content FROM modx_site_content WHERE parent='.$parentid.' ORDER BY createdon DESC LIMIT 0,4'); 
        $query_result = $modx->db->makeArray($query_result);
        $query_result = json_encode($query_result);
        $query_result = '{"result":'.$query_result.'}';
        
        $query_result = str_replace(array('?','=','&'),array('|xq|','|xe|','|xa|') , $query_result);
        
        echo utf8_decode($query_result);
        
        ?>
        


        This is a super simple Snippet which delivers a json string containing the last 4 resources added to a specific folder. As this json result set is totally void of formatting instructions i can use the Widgeteer to template it in any way i wish. Like this:

        [!SIMPLX_Widgeteer?
        dataSet=`[[getArticlesByDate?parentid=2]]`
        &dataSetRoot=`result`
        &useChunkMatching=true
        &chunkMatchingSelector=`type`
        &chunkPrefix=`version1_`!]
        


        Or

        [!SIMPLX_Widgeteer?
        dataSet=`[[getArticlesByDate?parentid=2]]`
        &dataSetRoot=`result`
        &useChunkMatching=true
        &chunkPrefix=`version2_`
        &chunkMatchingSelector=`type`!]
        


        Where &chunkPrefix selects different Chunk templates for the same objects, and renders different views of the same data source.

        TODO:

        The first thing for me to fix is recursive parsing of JSON.


        Ciao,
        Lars
          Keep it SIMPLX
          • 26931
          • 2,314 Posts
          hi Lars,
          nice! thanks for sharing
            • 16681
            • 62 Posts
            Hi,

            Dont forget that you have to encode urls in the dataSourceUrl parameter.

            This site does it for you smiley
            http://urlencode.se/

            Ciao
              Keep it SIMPLX
              • 19980 ☆ A M B ☆
              • 275 Posts
              Hello

              do you mind to share the snippet call in revo, please?


              Thanks
                modx and ecommerce pro
                • 38351
                • 16 Posts
                Lars,

                Hoping that you're still supporting Widgeteer. I didn't see a support forum for the latest release, but I'm experiencing a missing argument error. I was hoping you could provide me any insight.

                Here's what I'm experiencing. I've literally just launched the Widgeteer template that came with the add-on. I haven't done any customization/tweaking to it.

                http://hoby.ericellisdesign.com/json-test
                username: hugh
                password: !thenewhoby!

                You'll see that the live results aren't displaying. Any insight would be helpful!
                  • 38351
                  • 16 Posts
                  Nevermind, I solved it. I was using 0.6.5 and the latest appears to be 0.8.4. Need to update on MODx.com!
                  https://gist.github.com/larscwallin/1372956/raw/d175d7ebf2d38e03b7383951054d9a70b433d2d3/simplx_widgeteer.php

                  Quote from: fnkdumplin1 at Jul 08, 2013, 07:32 PM
                  Lars,

                  Hoping that you're still supporting Widgeteer. I didn't see a support forum for the latest release, but I'm experiencing a missing argument error. I was hoping you could provide me any insight.

                  Here's what I'm experiencing. I've literally just launched the Widgeteer template that came with the add-on. I haven't done any customization/tweaking to it.

                  http://hoby.ericellisdesign.com/json-test
                  username: hugh
                  password: !thenewhoby!

                  You'll see that the live results aren't displaying. Any insight would be helpful!