This is really great! I'm using it for training. Two questions I hope you can help with: 1. You mentioned to replace the "Share" with a link to download supplemental materials (like pdfs), can you post the code for that replacement? Can it be a button link? 2. Can there be a previous and next button or forward and back arrow to show one record at a time instead of all at once? Thank you so much for the tutorial, it's amazing!
Hi, Thanks for watching. 1- Check the sample in this link learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#add-an-action-button-to-a-field-advanced 2- You can use two lists with dynamic filtering check this other video: ua-cam.com/video/fWYntPmwCac/v-deo.htmlsi=hmlvBFHIJACbEATm
This is a little of topic, but I am hoping you can give me advice. I successful made a video using PowerPoint and saved as a MP4. I got it over to the SharePoint and I got CC, Transcripts, etc. Now I just need to do something about my voice. I notice this is a transcript upload. Is there a place where I can upload my transcript so I can get nice voice for the narration? I believe the file from SharePoint is VVT. Is that only for the transcript or will does it cover the voice too? Thank you,
Thank you for this video.. its good stuff! Question, could this method be implemented to a SharePoint list using profile picture from the people column 🤔
@guiliano de luca, good solution. However I can't seem to get the link on the "watch now" button to open when the doc library is inserted on the SharePoint page. Can you assist?
Hi Dayvidson, Thanks, this is not possible using List View Column formatting, you need to develop a custom solution for that, Maybe you can have a look to one of my solution how to implement google analytics: github.com/giuleon/js-application-analytics
@giuliano - Hello Giuliano - very very helpful. One question i have is that the 2nd button, you have as share, how do i change it so that it goes to a file of supplemental documents (building a video library of learning modules)
Hi Giuliano, thanks to nice piece of praxis shared ☺. Is there any option to add html links in vdeo description or ather column/form field? This could be useful for references to pdfs, related content and etc.
Stream team is working on an out of the box field rich text field that will be editable on the player page in SharePoint and OneDrive in coming months. The field is already released if you use Power Apps or other to set it: _ExtendedDescription
Hi Giuliano, this is an amazing instruction video! One issue i encounter though: I can't make the Thumbnail work. When i upload an image, it shows up in the "Edit in grid view" UI. However, when i "Exit grid view", the Thumbnail reverts to that of the Video's first frame and when i re-enter the "Edit in grid view" the Thumbnail column's image value becomes a broken image icon. And when i change my view to the Video Library, the entire row with the thumbnail value specified disappears.
@7:58 are these your notes in some kind of clipboard? I have a hard time finding all the attribute class examples. What is the best source in looking at all available options for list formatting?
Hello Giuliano, I am happy to meet somebody helping out a little bit with Sharepoint. My question: is it possible to define a target for the watch button, say the default action? I would like to watch the video a) in a new tab or b) in another webpart on the same page. Thank you for any issue urs
Hi, Many thanks! Yes you can replace the watch button with an hyperlink that open the video in a new tab, check the example here (Search for _blank): docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-syntax-reference
@@DeLucaGiulian Giuliano Gracias for your quick answer. I tried and used as elmType the value "a". What syntax/parameter do I have to use to set the right value for the "href" attrbute? It can not be @currentfield and "href": "[$Name]" didn't work ... Thank you - if there will be more questions, I will hire you😉, by linkedin, isn't-it? Regards from France et Switzerland Urs
Thank you for this wonderful video! How can we force this video library to sort in descending order from newest to oldest? Also, is there a way to choose an existing thumbnail instead of uploading a new one every time?
Hi, Thank you for your kind words. Yes you can use this syntax: { "elmType": "img", "attributes": { "src": "@thumbnail.200x100" }, "style": { "float": "right" } }
This was VERY helpful. Thank you. I'm wondering if there's a way to do raw HTML in a list field and have that displayed - we do not use Microsoft's stream or video stored in document libraries due to many limitations (cannot track views; player is not efficient for global audiences, quota limitations, etc), so we use Vimeo instead. Normally we do the embedded HTML on a page, but that requires us to edit the page every time we broadcast an episode. I'd much rather be able to create a list that has thumbnail, episode number, desc, etc like you did, but also have a field for the html, and display the embedded html as an element in the list view. I checked the elmType reference as you pointed in another comment, but I don't see how any of them would be like that. Got any tips?
Hi, Thank you for watching and sharing your experience. It's not possible to embed HTML using List view & Column formatting, however you can create a custom web part that shows your Vimeo content, here I made a video how to create web parts in SharePoint online: ua-cam.com/video/S0QPk4eWQlQ/v-deo.html
Hi Giuliano! Thanks for the Video however i have followed your instructions several times but I can´t get the discription to appear. Do you have any suggestions on why this isn´t working.
This was very helpful, thank you so much, I was wondering if it is possible to add a like button to this and if so could you point me out to a tutorial? I'm new to JSON in SP sites so I'm trying to learn it
Hi, Thanks for your question. Yes, you can create a button that when pressed adds a like on a numeric column. Refer to this other video: ua-cam.com/video/JmZKkfy3Tx8/v-deo.html
I got this to work with video links on UA-cam and other sites. However, I am battling to get a thumbnail for the YOutube link. Not so clued up on sharepoint. But I think it has got something to do with line in the code. { "elmType": "img", "attributes": { "src": "[$Thumbnail.serverRelativeUrl]", "title": "[$Title]"
Hi Paul, Thank you for watching my video and for your question. The JSON code requires that you create a column in your case named "Thumbnail", the column must be an image column and after that you have uploaded a picture for every row you will be able to see the Thumbnail in your view.
How did you put in the Icons in front of the Headlines? I am planning to make a "Academy" page where video and pdf are mixed. It would be nice if the user would be able to see on first sight if the elment is a video or a text based document.
Hi Jens, Thank you for your question. You can use emojis in the title check out this video: ua-cam.com/video/6nQ9ZGZbZ40/v-deo.html Or as you said you can add an additional column content type where you display just text or icons, something like this: "elmType": "div", "attributes": { "iconName": "Group", "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary", "title": "Details" }, where in the iconName you have to define the name of the icon that you want to use, check this website to choose the icon and copy the name: developer.microsoft.com/en-us/fluentui#/styles/web/icons
@@DeLucaGiulian Thanks a lot. I have another question. In line 115 you write "display": "=(if(@me == [$Author.email], 'span', 'none'))" is there a possibility to change it that everyone with editing right sees the button? As a workaround i would use an "Knowledge Center User" who uploads the content.
Hi, You can create your thumbnail column storing every images in the site assets library for example, or you can reuse an existing field for video files provided by Microsoft and the syntax to use is this one: { "elmType": "img", "attributes": { "src": "@thumbnail.200x100" }, "style": { "float": "right" } }
Hi, How do I implement it in Power Apps when I want to upload the data along with my videos and display it in SharePoint? By the way, I want to attach the videos within power apps 😁
@@cesarbecerra9624 check this out to get started learn.microsoft.com/en-us/power-apps/maker/canvas-apps/add-images-pictures-audio-video ua-cam.com/video/n3mhe88BI34/v-deo.html
Hi James, Office 365 Video is retired: docs.microsoft.com/en-us/stream/migrate-from-office-365 Now you have to go with Stream which will be hosted in SharePoint.
Giuliano, hope you are fine. Thanks for this great video. But I just don't get that "src": "[$Thumbnail.serverRelativeUrl]" done, The thumbnail are not getting visible. It must be a simple thing but just can't find what. Despite some PowerShell experience I don't understand this part. How is the variable getting his value to point where the video's are located.
Thank you Tasova for watching my video, I'm glad you found it useful, you can follow a link in the video description or down below: github.com/giuleon/ListViewFormattingVideoLibrary
@@DeLucaGiulian Hi Giuliano, Very kind of you willing to give a reply, thank you :). Do you have a tip like a good book or website where I can learn from the basic how to use JSON within Sharepoint. Kind regards. Forget it :) Do have also a easy way to show subfolders in folder were are also the folder. Now I have folder lets say Project Department Video, unther there another subfolder Christmas Video 2022. With the JSON is the thubnails but also shows the subfolder "Christmas Video 2022" is same way and cant open it.
![👍👎How to add like and dislike buttons in Microsoft/SharePoint Lists [YouTube user experience]](http://i.ytimg.com/vi/0bGwNUojk0Y/mqdefault.jpg)
![👍👎How to add like and dislike buttons in Microsoft/SharePoint Lists [YouTube user experience]](/img/tr.png)
Link to the JSON demonstrated in the video:
github.com/giuleon/ListViewFormattingVideoLibrary
This is the first very solid explanation I've found on how to create a clean looking AND functional UI. Thanks!
That is a great way to have a good looking video libary. I will implement it in our intranet for Onboarding Videos
Thanks 😉
Wow Nice, Thanks
very thorough
This is really great! I'm using it for training. Two questions I hope you can help with:
1. You mentioned to replace the "Share" with a link to download supplemental materials (like pdfs), can you post the code for that replacement? Can it be a button link?
2. Can there be a previous and next button or forward and back arrow to show one record at a time instead of all at once?
Thank you so much for the tutorial, it's amazing!
Hi,
Thanks for watching.
1- Check the sample in this link
learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#add-an-action-button-to-a-field-advanced
2- You can use two lists with dynamic filtering check this other video:
ua-cam.com/video/fWYntPmwCac/v-deo.htmlsi=hmlvBFHIJACbEATm
Used this, it looks great - thanks
This is a little of topic, but I am hoping you can give me advice. I successful made a video using PowerPoint and saved as a MP4. I got it over to the SharePoint and I got CC, Transcripts, etc. Now I just need to do something about my voice. I notice this is a transcript upload. Is there a place where I can upload my transcript so I can get nice voice for the narration? I believe the file from SharePoint is VVT. Is that only for the transcript or will does it cover the voice too? Thank you,
Thank you for this video.. its good stuff! Question, could this method be implemented to a SharePoint list using profile picture from the people column 🤔
Many thanks for watching and asking 😊
Yes this is feasible.
@guiliano de luca, good solution. However I can't seem to get the link on the "watch now" button to open when the doc library is inserted on the SharePoint page. Can you assist?
Hi Jennifer, thanks for watching, for the watch now button you should have this JSON snippet:
{
"elmType": "button",
"customRowAction": {
"action": "defaultClick"
},
"style": {
"width": "150px",
"margin-left": "10px",
"display": "span"
},
"txtContent": "Watch Now",
"attributes": {
"class": "sp-row-button ms-bgColor-themePrimary sp-row-button ms-bgColor-themeDarkAlt--hover ms-fontWeight-semibold ms-fontColor-white"
}
},
Hey there Giulinano! Excellent work!
I ve just do it, but I d like to know if we could add a views counter, and how could I do it ?
Thanks a lot!
Hi Dayvidson,
Thanks, this is not possible using List View Column formatting, you need to develop a custom solution for that,
Maybe you can have a look to one of my solution how to implement google analytics:
github.com/giuleon/js-application-analytics
@@DeLucaGiulian thanks a lot! I lol look it
One more question and for comments on videos ? Do you have any advices ?
This is awesome thanks. Can you please link to the json? Thanks!
Hi,
here we go:
github.com/giuleon/ListViewFormattingVideoLibrary
it is also in the video description
@giuliano - Hello Giuliano - very very helpful. One question i have is that the 2nd button, you have as share, how do i change it so that it goes to a file of supplemental documents (building a video library of learning modules)
Hi @Cinde thank you, you can replace the button with an hyperlink that point out to the doc
Hi Giuliano, thanks to nice piece of praxis shared ☺. Is there any option to add html links in vdeo description or ather column/form field? This could be useful for references to pdfs, related content and etc.
Hi Thomas,
Thanks for your question.
This is possible by creating an additional column
Stream team is working on an out of the box field rich text field that will be editable on the player page in SharePoint and OneDrive in coming months. The field is already released if you use Power Apps or other to set it: _ExtendedDescription
Thanks @Marc for your clarification
my description didn't show, how could I fix it?
Check if the name of your column is written correctly in your JSON
Hi Giuliano, this is an amazing instruction video! One issue i encounter though: I can't make the Thumbnail work. When i upload an image, it shows up in the "Edit in grid view" UI. However, when i "Exit grid view", the Thumbnail reverts to that of the Video's first frame and when i re-enter the "Edit in grid view" the Thumbnail column's image value becomes a broken image icon. And when i change my view to the Video Library, the entire row with the thumbnail value specified disappears.
DId you ever figure this out? Im actually having the same issue.
Same
Nice video. Is it possible to watch video inline?
Hi,
This is not yet possible
@7:58 are these your notes in some kind of clipboard? I have a hard time finding all the attribute class examples. What is the best source in looking at all available options for list formatting?
Hi Pedrag,
Check this link:
docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-syntax-reference
Hello Giuliano, I am happy to meet somebody helping out a little bit with Sharepoint. My question: is it possible to define a target for the watch button, say the default action? I would like to watch the video a) in a new tab or b) in another webpart on the same page.
Thank you for any issue
urs
Hi,
Many thanks!
Yes you can replace the watch button with an hyperlink that open the video in a new tab, check the example here (Search for _blank):
docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-syntax-reference
@@DeLucaGiulian Giuliano Gracias for your quick answer. I tried and used as elmType the value "a". What syntax/parameter do I have to use to set the right value for the "href" attrbute? It can not be @currentfield and "href": "[$Name]" didn't work ...
Thank you - if there will be more questions, I will hire you😉, by linkedin, isn't-it? Regards from France et Switzerland Urs
Thank you for this wonderful video! How can we force this video library to sort in descending order from newest to oldest? Also, is there a way to choose an existing thumbnail instead of uploading a new one every time?
Hi,
Thank you for your kind words.
Yes you can use this syntax:
{
"elmType": "img",
"attributes": {
"src": "@thumbnail.200x100"
},
"style": {
"float": "right"
}
}
This was VERY helpful. Thank you. I'm wondering if there's a way to do raw HTML in a list field and have that displayed - we do not use Microsoft's stream or video stored in document libraries due to many limitations (cannot track views; player is not efficient for global audiences, quota limitations, etc), so we use Vimeo instead. Normally we do the embedded HTML on a page, but that requires us to edit the page every time we broadcast an episode. I'd much rather be able to create a list that has thumbnail, episode number, desc, etc like you did, but also have a field for the html, and display the embedded html as an element in the list view. I checked the elmType reference as you pointed in another comment, but I don't see how any of them would be like that. Got any tips?
Hi,
Thank you for watching and sharing your experience.
It's not possible to embed HTML using List view & Column formatting, however you can create a custom web part that shows your Vimeo content, here I made a video how to create web parts in SharePoint online:
ua-cam.com/video/S0QPk4eWQlQ/v-deo.html
Hi Giuliano! Thanks for the Video however i have followed your instructions several times but I can´t get the discription to appear. Do you have any suggestions on why this isn´t working.
I had the same problem. Replacing $VideoDescription with $Video_x002e_Description finally worked for me.
@auntielisa great that you solved
For reference, you must use the internal name of the field/column.
Great! But how can I do this with UA-cam videos as opposed to uploaded videos?
Hi, you can use a normal list adding a URL field for the UA-cam video link
This was very helpful, thank you so much, I was wondering if it is possible to add a like button to this and if so could you point me out to a tutorial? I'm new to JSON in SP sites so I'm trying to learn it
Hi,
Thanks for your question.
Yes, you can create a button that when pressed adds a like on a numeric column.
Refer to this other video:
ua-cam.com/video/JmZKkfy3Tx8/v-deo.html
Love this!
@Giuliano - Are you open to some DEV work & what's the best way to contact you to discuss please?
Answered on LinkedIn
I got this to work with video links on UA-cam and other sites. However, I am battling to get a thumbnail for the YOutube link. Not so clued up on sharepoint. But I think it has got something to do with line in the code.
{
"elmType": "img",
"attributes": {
"src": "[$Thumbnail.serverRelativeUrl]",
"title": "[$Title]"
Hi Paul,
Thank you for watching my video and for your question.
The JSON code requires that you create a column in your case named "Thumbnail", the column must be an image column and after that you have uploaded a picture for every row you will be able to see the Thumbnail in your view.
How did you put in the Icons in front of the Headlines?
I am planning to make a "Academy" page where video and pdf are mixed.
It would be nice if the user would be able to see on first sight if the elment is a video or a text based document.
or how can i integrate another line where the dokument type is symbolized by an icon.
Hi Jens,
Thank you for your question.
You can use emojis in the title check out this video:
ua-cam.com/video/6nQ9ZGZbZ40/v-deo.html
Or as you said you can add an additional column content type where you display just text or icons, something like this:
"elmType": "div",
"attributes": {
"iconName": "Group",
"class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
"title": "Details"
},
where in the iconName you have to define the name of the icon that you want to use, check this website to choose the icon and copy the name:
developer.microsoft.com/en-us/fluentui#/styles/web/icons
@@DeLucaGiulian Thanks a lot. I have another question. In line 115 you write "display": "=(if(@me == [$Author.email], 'span', 'none'))" is there a possibility to change it that everyone with editing right sees the button?
As a workaround i would use an "Knowledge Center User" who uploads the content.
Hi Giuliano, thank you for this video! Do you know if there is a way to access to "View count" via JSON like [$_CommentCount] ?
Hi EmMa, thank you for watching, yes you can use the field [$_CommentCount]
You didn't explain the thumbnail. Where is it pulling the thumbnail from??
Hi,
You can create your thumbnail column storing every images in the site assets library for example, or you can reuse an existing field for video files provided by Microsoft and the syntax to use is this one:
{
"elmType": "img",
"attributes": {
"src": "@thumbnail.200x100"
},
"style": {
"float": "right"
}
}
Hi great video, yes can you expand on this please, I am can't understand how to get thumbnails to work. Thanks
@@DeLucaGiulian Can you please make a video regarding the Thumbnails. thank you !
@@ColourWorms have you been able to figure this out ?
What if I don't want to choose my thumbnail and just want to use the thumbnail that comes up with the youtube video
Hi,
In that case you should use a normal list instead of a doc library and with some JSON adjustment you can get the thumbnail from UA-cam
Hi, How do I implement it in Power Apps when I want to upload the data along with my videos and display it in SharePoint?
By the way, I want to attach the videos within power apps 😁
Hi,
You can change the form of the SharePoint document library with Power Apps
@@DeLucaGiulian There is a video for that problem.
@@cesarbecerra9624 check this out to get started
learn.microsoft.com/en-us/power-apps/maker/canvas-apps/add-images-pictures-audio-video
ua-cam.com/video/n3mhe88BI34/v-deo.html
The image keeps disappearing.
Why would you no just use office 365 video? Why make the extra work
Hi James,
Office 365 Video is retired:
docs.microsoft.com/en-us/stream/migrate-from-office-365
Now you have to go with Stream which will be hosted in SharePoint.
Giuliano, hope you are fine. Thanks for this great video. But I just don't get that "src": "[$Thumbnail.serverRelativeUrl]" done, The thumbnail are not getting visible. It must be a simple thing but just can't find what. Despite some PowerShell experience I don't understand this part. How is the variable getting his value to point where the video's are located.
Thank you Tasova for watching my video, I'm glad you found it useful, you can follow a link in the video description or down below:
github.com/giuleon/ListViewFormattingVideoLibrary
@@DeLucaGiulian Hi Giuliano, Very kind of you willing to give a reply, thank you :). Do you have a tip like a good book or website where I can learn from the basic how to use JSON within Sharepoint. Kind regards. Forget it :) Do have also a easy way to show subfolders in folder were are also the folder. Now I have folder lets say Project Department Video, unther there another subfolder Christmas Video 2022. With the JSON is the thubnails but also shows the subfolder "Christmas Video 2022" is same way and cant open it.