Create Safety cross

[Adinator]

Hello Community,
I am trying to create a security cross in Powerapps (see image1).

This should work as follows:
The cross should contain the days of the month (1-30 or 31) and be displayed in colour depending on the status.

A safety cross is mostly used in the production department so that you can see on which day an accident happened and when not.

APP:
In the middle there is a small +, when you click on it, a pop-up opens where you select the day of the month (1-30 or 31) and the status (accident-free, almost accident, accident). Each of these statuses has a colour: accident-free -> green, near-accident -> orange, accident -> red. then the safety cross should also show that e.g. 1 is green, 2 is yellow. (See picture 2)

Hello Community,
I am trying to create a security cross in Powerapps (see image1).

This should work as follows:
The cross should contain the days of the month (1-30 or 31) and be displayed in colour depending on the status.

A safety cross is mostly used in the production department so that you can see on which day an accident happened and when not.

APP:
In the middle there is a small +, when you click on it, a pop-up opens where you select the day of the month (1-30 or 31) and the status (accident-free, almost accident, accident). Each of these statuses has a colour: accident-free -> green, near-accident -> orange, accident -> red. then the safety cross should also show that e.g. 1 is green, 2 is yellow. (See picture 2)

All other days that are in the future should be hidden, as in picture 1.

@BCBuizer

[Adinator]

Hi @BCBuizer , can we continue working on the project?

[BCBuizer]

@Adinator ,

Sure. What do you have built already and where are you getting stuck?

[Adinator]

@BCBuizer 

I would like to start from 0 today and build it up in a clean and structured way. Would you like to do the steps together?

[BCBuizer]

@Adinator ,

Happy to support, but I prefer doing it in this forum as mentioned before.

First step is to build the actual cross:

1. Insert a Blank Vertical Gallery (galVertical)
2. Resize the gallery so it becomes a square of, let's say, 700 x 700 pixels by setting the Height and Width properties
3. Set galVertical.Items to [-1,-1,01,02,03,-1,-1,-1,-1,04,05,06,-1,-1,07,08,09,10,11,12,13,14,15,16,-1,17,18,19,20,21,22,23,24,25,26,-1,-1,27,28,29,-1,-1,-1,-1,30,31,32,-1,-1]
4. Set galVertical.WrapCount to 7.
5. Set galVertical.TemplateSize to Self.Height/7.
6. Insert a button into the gallery (btnDate).
7. Set both btnDate.X and btnDate.Y to Parent.TemplateWidth/2 - Self.Width/2.
8. Set btnDate.Width to Parent.TemplateWidth-10.
9. Set btnDate.Height to Parent.TemplateHeight-10.
10. Set btnDate.Visible to ThisItem.Value>0.
11. Set btnDate.Text to ThisItem.Value.

Once completed, you should end up with something like this: 

When you get to this, we can talk about the next steps. Some of the set properties will have to be reworked a bit, but this is just to break things down and visualise the result of the first steps.

[Adinator]

@BCBuizer Thank you, as soon as I have that I will write to you

[Adinator]

Hi, what's next? Can we make it modern with cool features.

[BCBuizer]

HI @Adinator ,

I assume you were able to create the cross, correct? Next step is to connect it to a data source and create a pop-up to enter data into the data source.

Can you please share what the data should look like? Obviously there will be a date column to record the date, but besides that? Just a 'State' column such as in the opening post?

On the features, let's focus on functionality first and then deal with extras later.

[Adinator]

Hi @BCBuizer 

date, state and commentar

[BCBuizer]

Hi @Adinator,

Please make sure you have set your SharePoint list like below: 

• Date (Date/time type)
• State (Choice)
• Comments (Single line of text)

Please correct any of the above if needed to avoid confusion in the future.

Next steps:

1. Add a dropdown (drpMonth) control to the screen (outside of the gallery). This control is used to select a month for which the cross should be populating.
2. Set the drpMonth.Items property to: [{Name:"January", Value:1},{Name:"February", Value:2},{Name:"March", Value:3},{Name:"April", Value:4},{Name:"May", Value:5},{Name:"June", Value:6},{Name:"July", Value:7},{Name:"August", Value:8},{Name:"September", Value:9},{Name:"October", Value:10},{Name:"November", Value:11},{Name:"December", Value:12}]. (replace the names of the months to the German names if you want).
3. Add a second dropdown (drpYear) control to the screen (outside of the gallery). This control is used to select a year for which the cross should be populating.
4. Set the drp.Years property to: Sequence(2023 - Year(Today()) + 1, 2023). (this automatically adds new years to select as times passes. Initially it will only show 2023, but at the beginning of the next year 2024 is automatically added)
5. Add an Add icon (icoAdd) control to the screen (outside of the gallery).
6. Change the icoAdd.Height property to btnDate.Height and icoAdd.Width property to btnDate.Width. (this will make the icon the same size as the buttons in the gallery.)
7. Set the icoAdd.X property to galVertical.X + galVertical.Width/2 - Self.Width/2 and the icoAdd.Y property to galVertical.Y + galVertical.Heigth/2 - Self.Heigth/2. (this centers the icon to the middle of the gallery, in the blank spot.

When all done, your canvas should look something like this:

[Adinator]

Thank you, I have just done that. What happens now.
Looks good already 🙂