Closed Ali086N closed 1 year ago
@Ali086N Thank you for the reference but was @tecchan1107 who made the advent calendar "Great format".
Belive he can help you.
AL
@aaclage thanks I just updated the reference.
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.
Hi @Ali086N . Thanks for taking a look at the sample🙏✨ Here are the answers to your questions.
- 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.
- 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.
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!
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😣🙏
@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?
@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" } } ] } ] } ] } }
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.
@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" } } ] } ] } ] } }
And thank you very much for your quick replies :)!!!
@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.
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.
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
.
@tecchan1107 Eliminating the click also eliminates the fun 😅
And thank you again! I'm learning so much from your codes! 😀
@Ali086N It's my pleasure😆 Can I close this issue? (It doesn't matter if you close it.)
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:
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!
![2](https://user-images.githubusercontent.com/117032714/199924821-e344f0f3-8788-4fb9-a12a-97aa71665675.JPG)