Create multiple Collapsible elements based on iteration of db records.

I have a collapsible element with form elements that get saved. The collapsible is for what we call a "Goal" in the context of the app. What we need to do is be able to dynamically create multiple "Goal" collapsible elements for each goal in the db.

Currently I have a static "Goal" collapsible in the UI. I would like this to be an include.template that I can iterate over and create multiple collapsibles based on the number of Goals for a specific record.

I know how to do this in php, but how do I do something like this in appery.io?
1 person has
this question
+1
Reply
  • Hi Mark,


    The basics here are that you need to format the data that is coming to your service on your UI in a particular format.


    Here’s the basics :


    1. The data inbound (created by a server script service) must be an array of objects. So the basic format is


    [ { object Goal 1 }, { object goal 2}, { object goal 3}, { object goal n .... } ]


    When the data comes back from your Data service - you point the array iterator- at your collapsible . We generally put a grid on our top level collapsible that contains the data that would exist at the top level - like Name of goal, date of goals due or number of goals. Each of these object fields becomes a field on your grid.


    Dissecting your object goal 1 ,2,3, n array would then look like this :


    Standard templated object inside your array :


    { goalname : ‘my goal 1 name’ ,

    Numbergoals : 23,

    Ddatedue: ‘02/20/2019’}


    The next trick to the Data - is in this header object , the magical ‘array of data elements’ is here ( this is the data from your database ) so - your standard templated goal looks like this :


    { goalname : ‘my goal 1 name’ ,

    Numbergoals : 23,

    Ddatedue: ‘02/20/2019’, adata : [ array of rows from you database that relate to the header object ] }


    You then point - in the mapper UI- the adata array to a list or grid that you’ve placed underneath the collapsible in the designer...


    That’s the basics.


    Data Construction basics - Your Server Script: You construct the data in a server script that in super simple terms, interates through your Data you have ‘ordered’ in a particular meaningful order to ‘break’ on goal changes (ie - a New Collapsible)


    So a "for" loop - which senses Data breaks, inserts a header object in your array , and then simply adds rows to the adata array until the next break.


    I have a complex example that we just did for a client of ours ...I’ll attach a video of it here As well as the Data object that goes with it ... I’m on my phone now - so when at the office.


    But - all doable.


    Let me know how or if I can help .


    Bruce
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Tom,

    Here's a sample data object that we built - that supports a UI that has multiple collapsibles, with multiple levels of collapsibles....

    I'll attach a quick video that demos - I believe the requirement we are addressing is very close to yours...

    https://jsoneditoronline.org/?id=558d...

    if you'd like a more simple example - I believe someone on our team can locate something quickly - just let me know.

    Bruce
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hi Bruce, thanks for your response. I just found out from the client that the maximum number of Goals per record will be 4. So Im thinking I should just create 4 goals in the UI and hide the ones that are not being used. Have a +button so the client can add new goals dynamically up to 4 goals.

    The initial goals for a record will be added on another platform and accessed through an api call in Appery. So a use case would be two predefined goals in the record when it is opened, and if needed the client can add up to two more goals.

    Does this design sound like it would satisfy my requirements?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Also I would still be interested in reviewing a more simple example if your team has it handy.

    Thanks
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated