Object to HTML Flow Explained

Object to HTML Flow Explained

Comments

  • [b]Object to HTML Table Flow Explained:[/b]

    Hello all and welcome to my explanation of this "Object to HTML Table" flow.

    This is a powerful flow with a good number of steps, but it can save alot of time making tables in HTML format with just a few inputs.


    To start off, Ill explain the inputs to this flow:

    JSON Objects:
    This is the serialized JSON that holds the data for the table.

    nthRowStyleText:
    This is the html that will style every other row. For example, if I wanted to make every other row a silver background to make it easier to read through, Id put in background-color:silver

    tableStyleText:
    This is where you can define the style for the entire table (background-color, font-size, padding, etc).

    PropertyToColumnMapper:
    This is where you select what data youll pass in. Say the different entities of a datatype are Person_Name, Person_Age, Person_EyeColor; these will be listed like so

    [i]Person_Name[/i]
    [i]Person_Age[/i]
    [i]Person_EyeColor[/i]

    TableHeaders:
    These are the labels for each of the columns. This will go in the same order as above so you need to make sure you label them as such. Like so

    [i]Name[/i]
    [i]Age[/i]
    [i]Eye Color[/i]


    Now that weve got the inputs out of the way, lets go into how the flow works step by step.

    [img]att3[/img]

    1. Create the table headers

    2. Determine if weve put any tableStyle code, if yes, add it. If not, move on.

    3. Determine if weve put any NthRowStyle code, if yes, add it. If not, move on.

    4. We go into a loop that will build the TableHeaders.

    [img]att2[/img]

    1. After the loop, we close the TableHeaders section.

    2. Next, we get the Data Pair for the JSON object in play.

    3. This is where were thrown into the loop where all the table building happens.

    [img]att1[/img]

    1. First theres a rule that determines if it is a row that receives the "nth" styles you input before going into another loop for mapping the property to the column.

    2. After all the different column values have been allocated for that row, the loop ends and the bigger loop continues.

    3. The loop closes out by closing the tables row and resetting the property mapper before repeating the cycle.

    4. After all the respective columns and rows are added, the table is closed before the EndStep which outputs the generated HTML string.
      [i]edited by Scott@decisions.com on 10/1/2019[/i]

Sign In or Register to comment.