Show Links in the Advent Calendar and close the Presents automatically

[Ali086N]

Sample (which sample are you talking about)

List-Formatting/view-samples/advent-calendar

Question (the more details, the better)

First of, thank you @tecchan1107 for the Advent Calendar! It's very nice and I like it a lot!

I have two questions:

1. Is it possible to show images and/or links to another homepage?
2. Is it possible that the todays present shows as closed, everytime someone opens the Advent Calendar?
3. In the office version my copany uses, it's apparently not possible to use the html code in Managed Metadata-Columns, thats why I just use green and red for every box. Is there a workaround to Managed Metadata-Columns for the box colors?

I'm very new to lists and to using JSON or any coding, so sorry if I'm asking trivial questions.

Really appreciate any help you can give! Thanks in advance!

[aaclage]

@Ali086N Thank you for the reference but was @tecchan1107 who made the advent calendar "Great format".

Belive he can help you.

AL

[Ali086N]

@aaclage thanks I just updated the reference.

[Ali086N]

I found a solution for question 3. I just used two "Single Line Text"-Columns for the color names. But I'm still struggling with questions 1 and 2.

[tecchan1107]

Hi @Ali086N . Thanks for taking a look at the sample🙏✨ Here are the answers to your questions.

---

1. Is it possible to show images and/or links to another homepage?

Yes, it is. The following is the samples that, when clicked on, display the link set in the Link column.

Sample1 JSON

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "width": 280, "height": 280, "hideSelection": true, "formatter": { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "padding": "10px" }, "children": [ { "elmType": "div", "txtContent": "=getDate([$Date])", "style": { "width": "20%", "height": "20%", "border-radius": "50%", "display": "flex", "align-items": "center", "justify-content": "center", "font-size": "20px", "font-weight": "bold" }, "attributes": { "class": "ms-bgColor-themeLighter" } }, { "elmType": "a", "style": { "display": "=if([$Opened] , '' , 'none')", "width": "80%", "height": "80%", "text-decoration": "none" }, "attributes": { "href": "[$Link]", "target": "_blank" }, "children": [ { "elmType": "div", "style": { "display": "flex", "align-items": "center", "justify-content": "center", "height": "90%", "width": "100%" }, "children": [ { "elmType": "img", "style": { "max-height": "90%", "max-width": "90%" }, "attributes": { "src": "[$Present.serverRelativeUrl]" } } ] }, { "elmType": "div", "txtContent": "[$Title]", "style": { "display": "flex", "align-items": "center", "justify-content": "center", "height": "10%", "font-size": "18px", "font-weight": "bold" }, "attributes": { "class": "ms-fontColor-themePrimary" } } ] }, { "elmType": "div", "style": { "display": "=if([$Opened] , 'none' , 'flex')", "flex-direction": "column", "width": "80%", "height": "80%", "cursor": "pointer" }, "customRowAction": { "action": "setValue", "actionInput": { "Opened": "=if([$Opened] || [$Date] >= @now , '0' , '1')" } }, "children": [ { "elmType": "div", "style": { "display": "flex", "justify-content": "center", "height": "20%", "position": "relative", "top": "5%" }, "children": [ { "elmType": "svg", "style": { "fill": "[$RibbonColor]" }, "attributes": { "viewBox": "0 0 40 20" }, "children": [ { "elmType": "path", "style": { "stroke": "rgba(0,0,0,0.2)" }, "attributes": { "d": "M 20,20 L0,10 L0,0 L20,10 L40,0 L40,10 L20,20 Z" } } ] } ] }, { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center", "position": "relative", "width": "100%", "height": "80%" }, "children": [ { "elmType": "div", "style": { "width": "100%", "height": "20%", "background-color": "[$BoxColor]", "box-shadow": "0 0 5px rgba(0,0,0,0.6)", "z-index": "2" } }, { "elmType": "div", "style": { "width": "90%", "height": "80%", "background-color": "[$BoxColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "1" } }, { "elmType": "div", "style": { "position": "absolute", "width": "15%", "height": "100%", "background-color": "[$RibbonColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "3" } }, { "elmType": "div", "style": { "position": "absolute", "width": "90%", "height": "15%", "background-color": "[$RibbonColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "4" } } ] } ] } ] } } ```

Sample2 JSON

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "width": 280, "height": 280, "hideSelection": true, "formatter": { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "padding": "10px" }, "children": [ { "elmType": "div", "txtContent": "=getDate([$Date])", "style": { "width": "20%", "height": "20%", "border-radius": "50%", "display": "flex", "align-items": "center", "justify-content": "center", "font-size": "20px", "font-weight": "bold" }, "attributes": { "class": "ms-bgColor-themeLighter" } }, { "elmType": "div", "style": { "display": "=if([$Opened] , '' , 'none')", "width": "80%", "height": "80%" }, "children": [ { "elmType": "div", "style": { "display": "flex", "align-items": "center", "justify-content": "center", "height": "80%", "width": "100%" }, "children": [ { "elmType": "img", "style": { "max-height": "90%", "max-width": "90%" }, "attributes": { "src": "[$Present.serverRelativeUrl]" } } ] }, { "elmType": "div", "txtContent": "[$Title]", "style": { "display": "flex", "align-items": "center", "justify-content": "center", "height": "10%", "font-size": "18px", "font-weight": "bold" } }, { "elmType": "a", "txtContent": "[$Link.desc]", "style": { "display": "flex", "align-items": "center", "justify-content": "center", "height": "10%", "font-size": "15px", "font-weight": "bold" }, "attributes": { "href": "[$Link]", "target": "_blank", "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover" } } ] }, { "elmType": "div", "style": { "display": "=if([$Opened] , 'none' , 'flex')", "flex-direction": "column", "width": "80%", "height": "80%", "cursor": "pointer" }, "customRowAction": { "action": "setValue", "actionInput": { "Opened": "=if([$Opened] || [$Date] >= @now , '0' , '1')" } }, "children": [ { "elmType": "div", "style": { "display": "flex", "justify-content": "center", "height": "20%", "position": "relative", "top": "5%" }, "children": [ { "elmType": "svg", "style": { "fill": "[$RibbonColor]" }, "attributes": { "viewBox": "0 0 40 20" }, "children": [ { "elmType": "path", "style": { "stroke": "rgba(0,0,0,0.2)" }, "attributes": { "d": "M 20,20 L0,10 L0,0 L20,10 L40,0 L40,10 L20,20 Z" } } ] } ] }, { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center", "position": "relative", "width": "100%", "height": "80%" }, "children": [ { "elmType": "div", "style": { "width": "100%", "height": "20%", "background-color": "[$BoxColor]", "box-shadow": "0 0 5px rgba(0,0,0,0.6)", "z-index": "2" } }, { "elmType": "div", "style": { "width": "90%", "height": "80%", "background-color": "[$BoxColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "1" } }, { "elmType": "div", "style": { "position": "absolute", "width": "15%", "height": "100%", "background-color": "[$RibbonColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "3" } }, { "elmType": "div", "style": { "position": "absolute", "width": "90%", "height": "15%", "background-color": "[$RibbonColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "4" } } ] } ] } ] } } ```

---

2. Is it possible that the todays present shows as closed, everytime someone opens the Advent Calendar?

How about adding a new Multi-Person column so that only the users set there are shown with their gifts open?

The following is a sample where the Multi-Person column is updated when the present box is clicked, and the present is displayed if the Multi-Person column has been set to a logged-in user.

Sample3 JSON

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "width": 280, "height": 280, "hideSelection": true, "formatter": { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "padding": "10px" }, "children": [ { "elmType": "div", "txtContent": "=getDate([$Date])", "style": { "width": "20%", "height": "20%", "border-radius": "50%", "display": "flex", "align-items": "center", "justify-content": "center", "font-size": "20px", "font-weight": "bold" }, "attributes": { "class": "ms-bgColor-themeLighter" } }, { "elmType": "div", "style": { "display": "=if(indexOf([$Clicked.email],@me)>-1,'','none')", "width": "80%", "height": "80%" }, "children": [ { "elmType": "div", "style": { "display": "flex", "align-items": "center", "justify-content": "center", "height": "90%", "width": "100%" }, "children": [ { "elmType": "img", "style": { "max-height": "90%", "max-width": "90%" }, "attributes": { "src": "[$Present.serverRelativeUrl]" } } ] }, { "elmType": "div", "txtContent": "[$Title]", "style": { "display": "flex", "align-items": "center", "justify-content": "center", "height": "10%", "font-size": "18px", "font-weight": "bold" } } ] }, { "elmType": "div", "style": { "display": "=if(indexOf([$Clicked.email],@me)>-1,'none','flex')", "flex-direction": "column", "width": "80%", "height": "80%", "cursor": "pointer" }, "customRowAction": { "action": "setValue", "actionInput": { "Clicked": "=appendTo([$Clicked.email],@me)" } }, "children": [ { "elmType": "div", "style": { "display": "flex", "justify-content": "center", "height": "20%", "position": "relative", "top": "5%" }, "children": [ { "elmType": "svg", "style": { "fill": "[$RibbonColor]" }, "attributes": { "viewBox": "0 0 40 20" }, "children": [ { "elmType": "path", "style": { "stroke": "rgba(0,0,0,0.2)" }, "attributes": { "d": "M 20,20 L0,10 L0,0 L20,10 L40,0 L40,10 L20,20 Z" } } ] } ] }, { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center", "position": "relative", "width": "100%", "height": "80%" }, "children": [ { "elmType": "div", "style": { "width": "100%", "height": "20%", "background-color": "[$BoxColor]", "box-shadow": "0 0 5px rgba(0,0,0,0.6)", "z-index": "2" } }, { "elmType": "div", "style": { "width": "90%", "height": "80%", "background-color": "[$BoxColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "1" } }, { "elmType": "div", "style": { "position": "absolute", "width": "15%", "height": "100%", "background-color": "[$RibbonColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "3" } }, { "elmType": "div", "style": { "position": "absolute", "width": "90%", "height": "15%", "background-color": "[$RibbonColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "4" } } ] } ] } ] } } ```

---

That's all for the answer.

I am not very good at English, so there is a possibility that I may have interpreted your question incorrectly. So, if it is a wrong answer or if you have any unclear points or questions, please let me know again!

[tecchan1107]

As I commented earlier, my English is not very good. If I have misinterpreted your question, I would be grateful if you could give me an illustration of what you would like to do😣🙏

[Ali086N]

@tecchan1107 thank you so much!!!! It's perfect :) I combined your Sample1 JSON with your Sample3 JSON and now it's how I wanted it, to be.

I have one question, could there be a performance problem if 1000-5000 people open the calendar?

[Ali086N]

@tecchan1107 I just realised the following problem: Now it's possible to open every day :( It would be possible to open all the gifts on december 1st.

That's my combined code:

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "width": 280, "height": 280, "hideSelection": true, "formatter": { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "padding": "10px" }, "children": [ { "elmType": "div", "txtContent": "=getDate([$Date])", "style": { "width": "20%", "height": "20%", "border-radius": "50%", "display": "flex", "align-items": "center", "justify-content": "center", "font-size": "20px", "font-weight": "bold" }, "attributes": { "class": "ms-bgColor-themeLighter" } }, { "elmType": "a", "style": { "display": "=if(indexOf([$Clicked.email],@me)>-1,'','none')", "width": "80%", "height": "80%", "text-decoration": "none" }, "attributes": { "href": "[$Link]", "target": "_blank" }, "children": [ { "elmType": "div", "style": { "display": "flex", "align-items": "center", "justify-content": "center", "height": "90%", "width": "100%" }, "children": [ { "elmType": "img", "style": { "max-height": "90%", "max-width": "90%" }, "attributes": { "src": "[$Present.serverRelativeUrl]" } } ] }, { "elmType": "div", "txtContent": "[$Title]", "style": { "display": "flex", "align-items": "center", "justify-content": "center", "height": "10%", "font-size": "18px", "font-weight": "bold" } } ] }, { "elmType": "div", "style": { "display": "=if(indexOf([$Clicked.email],@me)>-1,'none','flex')", "flex-direction": "column", "width": "80%", "height": "80%", "cursor": "pointer" }, "customRowAction": { "action": "setValue", "actionInput": { "Clicked": "=appendTo([$Clicked.email],@me)" } }, "children": [ { "elmType": "div", "style": { "display": "flex", "justify-content": "center", "height": "20%", "position": "relative", "top": "5%" }, "children": [ { "elmType": "svg", "style": { "fill": "[$RibbonColor]" }, "attributes": { "viewBox": "0 0 40 20" }, "children": [ { "elmType": "path", "style": { "stroke": "rgba(0,0,0,0.2)" }, "attributes": { "d": "M 20,20 L0,10 L0,0 L20,10 L40,0 L40,10 L20,20 Z" } } ] } ] }, { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center", "position": "relative", "width": "100%", "height": "80%" }, "children": [ { "elmType": "div", "style": { "width": "100%", "height": "20%", "background-color": "[$BoxColor]", "box-shadow": "0 0 5px rgba(0,0,0,0.6)", "z-index": "2" } }, { "elmType": "div", "style": { "width": "90%", "height": "80%", "background-color": "[$BoxColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "1" } }, { "elmType": "div", "style": { "position": "absolute", "width": "15%", "height": "100%", "background-color": "[$RibbonColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "3" } }, { "elmType": "div", "style": { "position": "absolute", "width": "90%", "height": "15%", "background-color": "[$RibbonColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "4" } } ] } ] } ] } }

[tecchan1107]

Hi @Ali086N !

I have one question, could there be a performance problem if 1000-5000 people open the calendar?

I think it is probably fine. However, I do not have the environment to test with such a large number of users, so I cannot answer with certainty. Sorry😣

I just realised the following problem: Now it's possible to open every day :( It would be possible to open all the gifts on december 1st.

Sorry! I forgot to add a condition😅 I have fixed it so that it updates the value of Clicked if the value of $Date is not empty and $Date is less than or equal to today.

Sample JSON

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "width": 280, "height": 280, "hideSelection": true, "formatter": { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "padding": "10px" }, "children": [ { "elmType": "div", "txtContent": "=getDate([$Date])", "style": { "width": "20%", "height": "20%", "border-radius": "50%", "display": "flex", "align-items": "center", "justify-content": "center", "font-size": "20px", "font-weight": "bold" }, "attributes": { "class": "ms-bgColor-themeLighter" } }, { "elmType": "a", "style": { "display": "=if(indexOf([$Clicked.email],@me)>-1,'','none')", "width": "80%", "height": "80%", "text-decoration": "none" }, "attributes": { "href": "[$Link]", "target": "_blank" }, "children": [ { "elmType": "div", "style": { "display": "flex", "align-items": "center", "justify-content": "center", "height": "90%", "width": "100%" }, "children": [ { "elmType": "img", "style": { "max-height": "90%", "max-width": "90%" }, "attributes": { "src": "[$Present.serverRelativeUrl]" } } ] }, { "elmType": "div", "txtContent": "[$Title]", "style": { "display": "flex", "align-items": "center", "justify-content": "center", "height": "10%", "font-size": "18px", "font-weight": "bold" } } ] }, { "elmType": "div", "style": { "display": "=if(indexOf([$Clicked.email],@me)>-1,'none','flex')", "flex-direction": "column", "width": "80%", "height": "80%", "cursor": "pointer" }, "customRowAction": { "action": "setValue", "actionInput": { "Clicked": "=if(@now>=[$Date]&&Number([$Date])>0,appendTo([$Clicked.email],@me),'')" } }, "children": [ { "elmType": "div", "style": { "display": "flex", "justify-content": "center", "height": "20%", "position": "relative", "top": "5%" }, "children": [ { "elmType": "svg", "style": { "fill": "[$RibbonColor]" }, "attributes": { "viewBox": "0 0 40 20" }, "children": [ { "elmType": "path", "style": { "stroke": "rgba(0,0,0,0.2)" }, "attributes": { "d": "M 20,20 L0,10 L0,0 L20,10 L40,0 L40,10 L20,20 Z" } } ] } ] }, { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center", "position": "relative", "width": "100%", "height": "80%" }, "children": [ { "elmType": "div", "style": { "width": "100%", "height": "20%", "background-color": "[$BoxColor]", "box-shadow": "0 0 5px rgba(0,0,0,0.6)", "z-index": "2" } }, { "elmType": "div", "style": { "width": "90%", "height": "80%", "background-color": "[$BoxColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "1" } }, { "elmType": "div", "style": { "position": "absolute", "width": "15%", "height": "100%", "background-color": "[$RibbonColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "3" } }, { "elmType": "div", "style": { "position": "absolute", "width": "90%", "height": "15%", "background-color": "[$RibbonColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "4" } } ] } ] } ] } } ```

[Ali086N]

@tecchan1107 I used another solution could you take a look at it? I'm completely new to programming :)

And could yout tell me, how you insert your JSON?

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "width": 280, "height": 280, "hideSelection": true, "formatter": { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "padding": "10px" }, "children": [ { "elmType": "div", "txtContent": "=getDate([$Date])", "style": { "width": "20%", "height": "20%", "border-radius": "50%", "display": "flex", "align-items": "center", "justify-content": "center", "font-size": "20px", "font-weight": "bold" }, "attributes": { "class": "ms-bgColor-themeLighter" } }, { "elmType": "a", "style": { "display": "=if(indexOf([$Clicked.email],@me)>-1 && [$Opened],'','none')", "width": "80%", "height": "80%", "text-decoration": "none" }, "attributes": { "href": "[$Link]", "target": "_blank" }, "children": [ { "elmType": "div", "style": { "display": "flex", "align-items": "center", "justify-content": "center", "height": "90%", "width": "100%" }, "children": [ { "elmType": "img", "style": { "max-height": "90%", "max-width": "90%" }, "attributes": { "src": "[$Present.serverRelativeUrl]" } } ] }, { "elmType": "div", "txtContent": "[$Title]", "style": { "display": "flex", "align-items": "center", "justify-content": "center", "height": "10%", "font-size": "18px", "font-weight": "bold" } } ] }, { "elmType": "div", "style": { "display": "=if(indexOf([$Clicked.email],@me)>-1 && [$Opened],'none','flex')", "flex-direction": "column", "width": "80%", "height": "80%", "cursor": "pointer" }, "customRowAction": { "action": "setValue", "actionInput": { "Opened": "=if([$Opened] || [$Date] >= @now , '0' , '1')", "Clicked": "=appendTo([$Clicked.email],@me)" } }, "children": [ { "elmType": "div", "style": { "display": "flex", "justify-content": "center", "height": "20%", "position": "relative", "top": "5%" }, "children": [ { "elmType": "svg", "style": { "fill": "[$RibbonColor]" }, "attributes": { "viewBox": "0 0 40 20" }, "children": [ { "elmType": "path", "style": { "stroke": "rgba(0,0,0,0.2)" }, "attributes": { "d": "M 20,20 L0,10 L0,0 L20,10 L40,0 L40,10 L20,20 Z" } } ] } ] }, { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center", "position": "relative", "width": "100%", "height": "80%" }, "children": [ { "elmType": "div", "style": { "width": "100%", "height": "20%", "background-color": "[$BoxColor]", "box-shadow": "0 0 5px rgba(0,0,0,0.6)", "z-index": "2" } }, { "elmType": "div", "style": { "width": "90%", "height": "80%", "background-color": "[$BoxColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "1" } }, { "elmType": "div", "style": { "position": "absolute", "width": "15%", "height": "100%", "background-color": "[$RibbonColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "3" } }, { "elmType": "div", "style": { "position": "absolute", "width": "90%", "height": "15%", "background-color": "[$RibbonColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "4" } } ] } ] } ] } }

[Ali086N]

And thank you very much for your quick replies :)!!!

[Ali086N]

@tecchan1107 I have also another question regarding the Multi-Person column. Is it possible to do it without it? We have a very strict privacy policy at our firm and my bosses showed concerns regarding the tracking of the viewers/users.

[tecchan1107]

Hi @Ali086N !

I used another solution could you take a look at it? I'm completely new to programming :)

Very Awesome😍😍😍😍😍✨ However, with this method, when you click on a future gift, it will not open at this time, but may open on its own over time. So, it may be better to update only Clicked and refer only to Clicked for opening gifts, as in the code I just pasted.

And could yout tell me, how you insert your JSON?

Is this a way to insert JSON into this comment field? This is using details,summary and Code Blocks.

• How to use details,summary expandable content on GitHub with Markdown
• Extended Syntax

I have also another question regarding the Multi-Person column. Is it possible to do it without it? We have a very strict privacy policy at our firm and my bosses showed concerns regarding the tracking of the viewers/users.

How about eliminating the click and allowing the gift to be opened over time? The following sample opens a present after the date in $Date.

Sample JSON

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "width": 280, "height": 280, "hideSelection": true, "formatter": { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "padding": "10px" }, "children": [ { "elmType": "div", "txtContent": "=getDate([$Date])", "style": { "width": "20%", "height": "20%", "border-radius": "50%", "display": "flex", "align-items": "center", "justify-content": "center", "font-size": "20px", "font-weight": "bold" }, "attributes": { "class": "ms-bgColor-themeLighter" } }, { "elmType": "a", "style": { "display": "=if(@now>=[$Date]&&Number([$Date])>0,'','none')", "width": "80%", "height": "80%", "text-decoration": "none" }, "attributes": { "href": "[$Link]", "target": "_blank" }, "children": [ { "elmType": "div", "style": { "display": "flex", "align-items": "center", "justify-content": "center", "height": "90%", "width": "100%" }, "children": [ { "elmType": "img", "style": { "max-height": "90%", "max-width": "90%" }, "attributes": { "src": "[$Present.serverRelativeUrl]" } } ] }, { "elmType": "div", "txtContent": "[$Title]", "style": { "display": "flex", "align-items": "center", "justify-content": "center", "height": "10%", "font-size": "18px", "font-weight": "bold" } } ] }, { "elmType": "div", "style": { "display": "=if(@now>=[$Date]&&Number([$Date])>0,'none','flex')", "flex-direction": "column", "width": "80%", "height": "80%", "cursor": "pointer" }, "children": [ { "elmType": "div", "style": { "display": "flex", "justify-content": "center", "height": "20%", "position": "relative", "top": "5%" }, "children": [ { "elmType": "svg", "style": { "fill": "[$RibbonColor]" }, "attributes": { "viewBox": "0 0 40 20" }, "children": [ { "elmType": "path", "style": { "stroke": "rgba(0,0,0,0.2)" }, "attributes": { "d": "M 20,20 L0,10 L0,0 L20,10 L40,0 L40,10 L20,20 Z" } } ] } ] }, { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center", "position": "relative", "width": "100%", "height": "80%" }, "children": [ { "elmType": "div", "style": { "width": "100%", "height": "20%", "background-color": "[$BoxColor]", "box-shadow": "0 0 5px rgba(0,0,0,0.6)", "z-index": "2" } }, { "elmType": "div", "style": { "width": "90%", "height": "80%", "background-color": "[$BoxColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "1" } }, { "elmType": "div", "style": { "position": "absolute", "width": "15%", "height": "100%", "background-color": "[$RibbonColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "3" } }, { "elmType": "div", "style": { "position": "absolute", "width": "90%", "height": "15%", "background-color": "[$RibbonColor]", "box-shadow": "0 0 3px rgba(0,0,0,0.6)", "z-index": "4" } } ] } ] } ] } } ```

[Ali086N]

@tecchan1107 Eliminating the click also eliminates the fun 😅

[Ali086N]

And thank you again! I'm learning so much from your codes! 😀

[tecchan1107]

@Ali086N It's my pleasure😆 Can I close this issue? (It doesn't matter if you close it.)