Mehdi's Method for Creating a Collection?

[seadude]

I don't understand how Mehdi is creating a Collection using UpdateContext in this blog post. Has anyone else used this method?

When I try it out, the Data Source for the Gallery is set to "Custom" (which is interesting). But I can't seem to set the "heading" Controls to the "heading" value in the function.

UpdateContext({
    colAnalytics: [{
            header: "Profile"
        }, {
            title: "Work Info",
            description: "Hire date, level, salary & more",
            screen: Screen2
        }, {
            title: "Personal Info",
            description: "Contacts, home address & more",
            screen: Screen3
        }, {
            header: "Help and Feedback"
        }, {
            title: "Give us Feedback",
            description: "Share your experiences",
            screen: Screen4
        }, {
            title: "FAQ's",
            description: "Find answers to your issues",
            screen: Screen5
        }
    ]
})

I created a blank Gallery, inserted a Text Box, and tried to set its Default property to colAnalytics.header.Profile, but that was just a guess.

How does this method work? Mr. Andaloussi, are you on the forums?

[mr-dang]

Hi @seadude,

It looks like you're trying to replicate the collection at the end of Mehdi's blog.

I've formatted in another way to show a little bit more of the logic in it:

UpdateContext({
    colAnalytics: 
        [
            {
                header: "Profile",
                title: "",
                description: ""
            }, 

            {
                header: "",
                title: "Work Info",
                description: "Hire date, level, salary & more",
                screen: Screen2
            }, 
            {
                title: "Personal Info",
                description: "Contacts, home address & more",
                screen: Screen3
            }, 

            {header: "Help and Feedback"}, 
            
            {
                title: "Give us Feedback",
                description: "Share your experiences",
                screen: Screen4
            }, 
            {
                title: "FAQ's",
                description: "Find answers to your issues",
                screen: Screen5
            }
        ]
})

Red: name of the variable, which is a table

Blue: a record with only the header column and nothing else

Green: a record without the header column but having title, description, and screen

Since the variable colAnalytics is a table, you can set it in the Items property of Gallery1:

colAnalytics

Here's the discrepancy:

Each record will be EITHER a record with ONLY the header column and nothing else (blue) OR a record without the header column but having title, description, and screen (green). This means each record will not have content in all the columns. In orange, I am explicitly showing that the columns title and description are essentially blank for the first record and that header is blank for the second.

Big idea

You can get away with not listing all the columns for a record. A collection will assume every column exists for every record and if you did not type it in, it assumes a null value for it.

Solution

You're going to need to use conditional formatting based on the content in each row. If a row has information for header, you'll need to style it differently than a row that has no value for the header column.

Insert a label into Gallery1.

You had typed in colAnalytics.header.Profile. 

• colAnalytics.header means "show a single column table that only shows the value in the header column." Since it's a table, it would be usable in the Items property of a gallery, but not inside a label.
• "Profile" is the value in the header column--it's a text string, so you would not use 'dot-referencing' to reference it.

Instead of what you had typed, set the label's Text property to:

ThisItem.header

At this point, you should see 6 records in the gallery, but only the first and fourth records will have content because not every record has the header column.

Format the label to make it look the way you want the header to look, then set its visible property to:

!IsBlank(ThisItem.header)

This means the label will only show up if it has content for the header column.

Next, insert a label where you'll show the title and description:

ThisItem.Title & Char(10) & ThisItem.Description

Or separate each one into its own label--your choice.

You'll see that content will only appear in rows 2, 3, 5, 6 because those columns have no value for the first and fourth rows.

Style the label(s) the way you want.

Set their Visible property to only show up if they have no value in the header column:

IsBlank(ThisItem.header)

Let me know if this was helpful with a thumbs up.

Mr. Dang

_______

[seadude]

Hi @mr-dang. I'm working my way through this in depth lesson (thank you very much).

I've directly copied in the code you reformated to OnSelect of a Button control: (here it is copied FROM the control)

UpdateContext({
    colAnalytics: 
        [
            {
                header: "Profile",
                title: "",
                description: ""
            }, 

            {
                header: "",
                title: "Work Info",
                description: "Hire date, level, salary & more",
                screen: Screen2
            }, 
            {
                title: "Personal Info",
                description: "Contacts, home address & more",
                screen: Screen3
            }, 

            {header: "Help and Feedback"}, 
            
            {
                title: "Give us Feedback",
                description: "Share your experiences",
                screen: Screen4
            }, 
            {
                title: "FAQ's",
                description: "Find answers to your issues",
                screen: Screen5
            }
        ]
})

I've set a new Gallery's Items property to colAnalytics.

Inserted a new Label control. Unfortunately, there is no dot-notation available for the Text property except for .Value or .IsSelected.

When I set it to .header, its red sqigglies. Maybe we're missing a "{" or a "}" somwhere?

[seadude]

Aha! It actually ended up being ThisItem.Value.heading. Is this correct or did I miss something?

[mr-dang · Accepted solution]

Ah, I see what happened. If you use [] to designate a table, the dot-referencing has that added step compared to the Table() function which does not need it. 

UpdateContext({
    colAnalytics: 
    Table(
        {
            header: "Profile"
        }, 

        {
            title: "Work Info",
            description: "Hire date, level, salary & more"
        }, 
        {
            title: "Personal Info",
            description: "Contacts, home address & more"
        }, 

        {
            header: "Help and Feedback"
        }, 
        
        {
            title: "Give us Feedback",
            description: "Share your experiences"
        }, 
        {
            title: "FAQ's",
            description: "Find answers to your issues"
        }
    )
})

Also, you might like:

• Set(variable,Table())
• ClearCollect(collection,Table())

Brian

[ericonline]

Hi @mr-dang, 

I know this thread is getting old but I just found another awesome use case for it. Rather than have 48 Controls in my app with color swatches, I'm going to use a Gallery!

Heres the problem I'm seeing: The top swatch is black though its Fill Property is set to ColorValue(ThisItem.colorValue). All subsequent gallery items show up just fine, but not the top one. 

Here is the code OnVisible of the Screen: 

UpdateContext({
    swatchTest:
    Table(
        {header: "Primary"},
        {color: "primary_fill", colorValue: "#008291"},
        {color: "primary_swatch2Fill", colorValue: "#4FA3AE"},
        {color: "primary_swatch3Fill", colorValue: "#2D8A97"},
        {color: "primary_swatch4Fill", colorValue: "#076572"},
        {color: "primary_swatch5Fill", colorValue: "#014F5A"}
    )}
)

Any thoughts on why the top value is not displaying correctly? 

Thank yoU!

[ericonline]

Happening with all swatches following a heading. 

Also shortening the template makes subsequent headings move behind a swatch ("Secondary" shown here):

Somehow in Mehdi's example, each heading has its own row in the Gallery: 

[mr-dang]

Hi Eric,

The first one is appearing black because it only has a column for header. You can give it a color value, but then it would appear like the other ones. See comments below

UpdateContext({
    swatchTest:
    Table(
        {header: "Primary"}, // this row only has header column and not color or color value
        {color: "primary_fill", colorValue: "#008291"}, // this row does not have a header column
        {color: "primary_swatch2Fill", colorValue: "#4FA3AE"},
        {color: "primary_swatch3Fill", colorValue: "#2D8A97"},
        {color: "primary_swatch4Fill", colorValue: "#076572"},
        {color: "primary_swatch5Fill", colorValue: "#014F5A"}
    )}
)

You'll need to use a condition to make the behavior of the gallery change: If the row in the gallery has a header value (the header is not blank), use one style, else use the other style.

[ericonline]

Thank you for the guidance. I was able to indeed apply an If condition to the Label properties:

• FontWeight
• Size
• Color
• Fill

Which resulted in the look and feel of Mehdi's post. 

Fill Example: 

If(
    IsBlank(ThisItem.header),
    ColorValue(ThisItem.colorValue),
    White
)

Final Result: 

[mr-dang]

I like the color scheme a lot 🙂

You can make your own pantone if you keep this up