41
Views
12
Comments
Solved
Changing colour of expression in table header when it is weekend

Hi can you all give me a suggestion on how to change the table's header color if it's on weekend, the table will change every month based on the current month. 

The header is an expression. I try to use build in function DayOfWeek(Day(Element.Date)=1)=0 but it cannot read because the error message 'Date Time' data type required instead of 'Boolean'. Thank you

2023-09-06 07-26-35
Sudip Pal
Solution

Hey @Dorine Boudry ,

Yes you are always right. Thanks for correcting. 


Hey @Iman Haqem ,

Please follow the below approach :

1)Create the css class in CSS option.In my case the class name is "bgC".


.bgC { 

   background-color: red !important;

}


2)In attribute section of header cell use 

class=

If( DayOfWeek(GivenDate )=0 or DayOfWeek(GivenDate)=6,"bgC","" ) 


The below snip will help you


Thanks & Regards,

Sudip Pal

2023-09-06 07-26-35
Sudip Pal

Hey @Iman Haqem ,

In the attribute section of header cell use the below code :

Style=

If( DayOfWeek(GivenDate )=0 or DayOfWeek(GivenDate)=6,"backgroundColor:red","" )



Thanks & Regards,

Sudip Pal

2023-09-06 07-26-35
Sudip Pal

2021-09-06 15-09-53
Dorine Boudry
 
MVP

Hi @Sudip Pal ,

although this might work, you are promoting using inline styles on html elements, which is not a best practice.

See answer by Mika, is similar, but using class instead of style.

Dorine

2023-09-06 07-26-35
Sudip Pal
Solution

Hey @Dorine Boudry ,

Yes you are always right. Thanks for correcting. 


Hey @Iman Haqem ,

Please follow the below approach :

1)Create the css class in CSS option.In my case the class name is "bgC".


.bgC { 

   background-color: red !important;

}


2)In attribute section of header cell use 

class=

If( DayOfWeek(GivenDate )=0 or DayOfWeek(GivenDate)=6,"bgC","" ) 


The below snip will help you


Thanks & Regards,

Sudip Pal

2021-09-06 15-09-53
Dorine Boudry
 
MVP

Ok,

sorry but I feel compelled to correct a little more :

  • don't promote use of !important unless no other option works (so better is to use correct selector that is specific enough)
  • although adding class could work, the attribute higher up called 'style classes' would be the more obvious place to put this

Dorine

UserImage.jpg
Muhammad Iman Haqem Bin Saprin

Thanks Sudip, I don't know we can call the class like that ! Thank you for helping

2023-09-06 07-26-35
Sudip Pal

Hi @Dorine Boudry ,

Thanks for teaching those two lessons. I will definitely follow your approach. Have a great day.

Hey @Iman Haqem ,

Have a great day!

Thanks & Regards,

Sudip Pal

2022-05-05 14-37-30
Mika Grootenboer

Hello Iman,

I think you should call the DayOfWeek function in another way.

if you call it like "DayOfWeek(Element.Date)" you get a number between 0 and 6 back

 0 (Sunday) and is 6 (Saturday). (see documentation: https://success.outsystems.com/documentation/11/reference/outsystems_language/logic/built_in_functions/date_and_time/)


After that you can add an if-statement in the style class with the function called like above.

so:

If(DayOfWeek(Element.Date) = 0 or DayOfWeek(Element.Date) = 6, 

<class of backgroundcolor for weekends>,
<class of backgroundcolor for weekdays>

)


Hope this helps

UserImage.jpg
Muhammad Iman Haqem Bin Saprin

hi Mika, yes i understand it, it worked thanks, but can you help me give me an expression on how to make the expression followed me like this ? Day(Element.Date)=1. it means that i want the date to be 1 (example 1 september) on the expression of the table header and will change based on every month? this is a new problem I occured. That's why there's an expression of Day(Element.Date)=1. Thank you and sorry, this now how I make the expression on the header  "1/" + FormatDateTime(CurrDate(),"MM").

2023-09-06 07-26-35
Sudip Pal

I am assuming that you want dynamic header of a table based on month.

I am attaching a demo OML. Please have a look.

DynamicHeader.oml
UserImage.jpg
Muhammad Iman Haqem Bin Saprin

This is exactly what I want ! thank you Sudip

2023-09-06 07-26-35
Sudip Pal

Have a great day!

Thanks & Regards,

Sudip Pal

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.