cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
seadude
Level 10

Mehdi's Method for Creating a Collection?

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?

1 ACCEPTED SOLUTION

Accepted Solutions
mr-dang
Level 10

Re: Mehdi's Method for Creating a Collection?

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

Microsoft Employee
@8bitclassroom

View solution in original post

9 REPLIES 9
mr-dang
Level 10

Re: Mehdi's Method for Creating a Collection?

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

_______

 

Microsoft Employee
@8bitclassroom
seadude
Level 10

Re: Mehdi's Method for Creating a Collection?

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.

Screenshot from 2018-07-04 20-09-39.png

 

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

Screenshot from 2018-07-04 20-02-12.png

 

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

seadude
Level 10

Re: Mehdi's Method for Creating a Collection?

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

 

Screenshot from 2018-07-04 20-20-04.png

mr-dang
Level 10

Re: Mehdi's Method for Creating a Collection?

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

Microsoft Employee
@8bitclassroom

View solution in original post

Super User
Super User

Re: Mehdi's Method for Creating a Collection?

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. 

swatch.png

 

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!

Super User
Super User

Re: Mehdi's Method for Creating a Collection?

Happening with all swatches following a heading. 

 

swatch2.png

 

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

swatch3.png

 

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

swatch4.png

mr-dang
Level 10

Re: Mehdi's Method for Creating a Collection?

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.

 

 

Microsoft Employee
@8bitclassroom
Super User
Super User

Re: Mehdi's Method for Creating a Collection?

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: 

swatch5.png

mr-dang
Level 10

Re: Mehdi's Method for Creating a Collection?

I like the color scheme a lot 🙂

 

You can make your own pantone if you keep this up

Microsoft Employee
@8bitclassroom

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors
Users Online
Currently online: 323 members 5,762 guests
Recent signins:
Please welcome our newest community members: