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

[BCBuizer]

Hi  @Adinator , 

Next:

1. Set the icoAdd.OnSelect property to UpdateContext({popAdd: true}) (this sets a variable to show the pop up to add records to the data source
2. Add a container (cntPopAddBack) control to the canvas. (this will be the basis for the pop-up)
3. Set cntPopAddBack.X and cntPopAddBack.Y properties to 0. (this places it on the top left of the screen)
4. Set cntPopAddBack.Heigth property to Parent.Height and cntPopAddBack.Width property to Parent.Width. (this will make the container cover the entire screen)
5. Set the cntPopAddBack.Fill property to RGBA(0, 0, 0, 0.3). (this will give a visual indicator that the rest of the app can't be used while the pop-up is visible. It can be set to any RGBA value, but I like keep the Alpha parameter quite low so the user understands they are still in the context of the app)
6. Inside cntPopAddBack add another container (cntPopAddDialog). (this will contain the text and controls of the dialog).
7. Set the cntPopAddDialog.Fill property to RGBA(255,255,255,1). (this can be any other value as well, but make sure the Alpha parameter is set to 1 so there's no transparency).
8. Place and resize cntPopAddBack to your liking on the screen.
9. Inside cntPopAddDialog add a label (lblPopUpHeader).
10. Place lblPopUpHeader at the top of cntPopAddDialog.
11. Set the lblPopUpHeader.Text property to "Add safety record". (or any other text that suits the purpose of the pop-up).
12. Inside cntPopAddDialog add a datepicker control (dteDate). (this is to select the date for which the record gets submitted.)
13. Inside cntPopAddDialog add a dropdown (drpState) control. (this is to select the state)
14. Set the drpState.Items property to Choices(SharePointListName.State). (replace SharePointListName with the actual name of the list.
15. Inside cntPopAddDialog add a Text input (txtComments) control. (this is to add comments)
16. Inside cntPopAddDialog add a button (btnPopAddSubmit). (this is to submit new records)
17. Set the btnPopAddSubmit.Text property to "Submit".
18. Set the btnPopAddSubmit.Onselect property to:

     Patch(
    	SharePointListName,
    	With({
    		_Record: LookUp(
    			SharePointListName,
    			Date = dteDate.SelectedDate
    		)},
    		If(
    			IsBlank(_Record),
    			Defaults(SharePointListName),
    			_Record
    		)
    	),
    	{
    		Date: dteDate.SelectedDate,
    		State: drpState.Selected,
    		Comments: txtComments.Text
    	}
    );
    
    UpdateContext({popAdd: false}); 

    (This will update an existing record or create a new one if none exists and then make the pop-up disappear)
19. Inside cntPopAddDialog add a button (btnPopAddCancel). (this is to make the pop-up disappear without action)
20. Set the btnPopAddCancel.Text property to "Cancel".
21. Set the btnPopAddCancel.OnSelect property to UpdateContext({popAdd: false}).
22. Set the dteDate.Reset, drpState.Reset and txtComments.Reset properties to !popAdd. (this resets the controls when the popup is not visible anymore.
23. Set the cntPopAddBack.Visible property to PopAdd.

    You should now have a working pop-up with the ability to add/edit records in the data source.

[BCBuizer · Accepted solution]

Hi @Adinator ,

I made a few correction in above post, in step 18, so please check those.

Once all is working and you have the data source connected, the last step can be taken:

Set the btnDate.Fill property to:

With(
    {
        _Record: LookUp(
            Test,
            Date = Date(
                drpYear.Selected.Value,
                drpMonth.Selected.Value,
                ThisItem.Value
            )
        )
    },
    Switch(
        _Record.State.Value,
        "Choice 1",
        Color.Green,
        "Choice 2",
        Color.Orange,
        "Choice 3",
        Color.Red,
        RGBA(0,0,0,0.1)
    )
)

This makes the colour of the tiles inside the cross dependent on the selections in the drpMonth and drpYear and the entered records.

This is what the final result looks like:

As you can see I entered a record for today only.

[Adinator]

Hi @BCBuizer 

This looks very cool. Do you have any ideas on how to make it more modern and beautiful? also with cool features. How does it go from here?

[Adinator]

Hi @BCBuizer 

This looks very cool. Do you have any ideas on how to make it more modern and beautiful? also with cool features. How does it go from here?

[BCBuizer]

Hi @Adinator ,

When it comes to design, I'll leave that part up to you 🙂

If this is now working for you, please mark the right posts as the solutions. For further features please open separate topic, since this topic has already grown a bit out of hand.

[Adinator]

Thanks for your help, I will mark your post as helpful.

Could you please provide me with a copy of the app?
I would then open a new topic so that we can continue to work on it, is that OK?

[BCBuizer]

Hi @Adinator ,

With the detailed guide I shared, as per your request, you should be able to build the app without me having to provide you with a copy. In case you get stuck somewhere or it's not working as described, please let me know.

[Curtot43]

Could you share the app please?