I Created Quick Links Using Only SharePoint JSON Formatting

I'm going to show you how to set up a custom  quick links web part using SharePoint and Json   formatting everyone wants to make navigation  easier for their users give them access to   other resources without having to search  for it that's what these quick links are   really all about I'm going to show you how to  set this up where to get it how it works and   then I'm also going to show you how to customize  this thing to make this your own let's get into   it so this sample comes from my favorite place to  get samples from Microsoft 365 the M365 and Power   Platform GitHub Repro you've seen me use a lot  of samples from here before for Json formatting   but there's also Power Platform samples there's  all sorts of samples even if you're a developer   there's SharePoint framework samples so this is a  great source to get a head start on a particular   project so you don't have to create everything  from scratch and this example is called honeycomb   links because as you can see in the screenshot  these little quick links look like Honeycombs   but that's not the only shape you can use and  I'll show you that in a minute you can see that   on The View requirements all we really need are  three simple fields and one is already provided   out of the box the title field of course the  other two are URL and icon just single line   of text fields and that's just going to hold the  URL that the user will go to when they click on   that link and then the icon from fluent UI so  you don't even have to create the graphics for   this thing you can just specify an image name from  the fluent UI library and get something that looks   just like this now this sample was added about 9  months ago as you can see up on the top right but   there's some that were just added weeks ago so  definitely check this thing out if you haven't   been onto this site in a while or ever and one of  the great things about the Json formatting one in   particular but it really applies to all of them if  you're already involved with Json formatting this   is a great place to learn different techniques  for some of these different Json attributes if   you're brand new to Json formatting and you're  seeing these kind of solutions and you're trying   to learn this from the beginning well I've got  a course just went live today that walks you   through the whole process of Json formatting  even what Json is there's information Down   Below in the description if you want to see  more information about that course but let's   start setting this thing up so the first thing we  need to do is make a list that's going to house   this data so I'm just going to go into site  contents we'll create a new list called quick links now I'm going to add these new columns  that we need right here with this add column   button obviously this doesn't add it to the  content type itself so in a production scenario   I would still recommend using a content  type I've made videos on building out   content types and all the features of that  or you can grab my free guide in the video   description for some additional information  so let's just create this First Column these   are both going to be single lines of text  this is going to be URL and let's make this required and our second one again a single line  of text this will be icon and it's important to   call these column names URL and icon specifically  just because the Json formatting is referencing   The Columns by that name but you could honestly  call these whatever you would like as long as you   update the references in the Json we'll require  this so now let's start populating this with data so for the icon what we need to do  is grab the fluent UI icon name a quick   website for that is fli ion. and we can  search for teams maybe and we can find   this a teams logo right here so we'll hit  a little copy icon which copies this name   right here that's all we actually need  to reference this icon is just this so   we'll paste this icon into here and save it  and now let's build out a whole bunch more and there's a whole lot of icons in here you could  sort them by category or you can just do what I do   and just start typing in different things to try  and find something that would match what you're   trying to create in here uh this looks like it's  a good web type icon so let's just copy that one maybe we link this one to the HR site okay so I've got six in here now you  want at least five to see how this works   because there's something special that happens  once you get more than five now what we need   to do is create a brand new view so that we  can put in our custom Json so I'm going to   create a new view we'll call this quick links  we'll leave it as a list and then we're going   to go into format The View advanced mode like  we always do and then we go back to GitHub we   can click click on this Json file and get the  Json that we need there's a copy button right   here and then we'll just delete everything in  here and paste it in now let's preview this   and there is our honeycomb that looks pretty  good we can change icons around if we need to   because it's just list data you can always go  back to the all items View and change anything   that you need to but then we have our nice quick  view here so let's add this to our internet I'm   going to go back up to the Internet let's edit  the page and maybe right below this Carousel   we'll add it in we're just going to add a  list web part that's all we really need for this so you're going to edit the web part and  then for the view we're just going to switch   it to Quick links we can also toggle the command  bar and the SE all just to remove all of that to   clean up the interface a little bit and let's  republish and take a look at what we've got so   we've got our quick links here and you notice  they're WRA after five elements that was why   I said to create more than five just to see how  that looks this will create rows of icons and kind   of stagger the rows a little bit so everything  fits very nicely on the screen what if we wanted   this to go past five items per row we can do  that I'm going to show you how and I'm going   to talk about some of the other customizations  in a minute that we can do for this but let's   take a look at this Json and see how this whole  thing works so you see according to the schema   this is using a row formatter it's setting up a  couple of gener generic things right off the bat   like hide selection hide column header and then  we're defining the row formatter and you'll see   we're creating a couple of divs and we're setting  positioning using the left and top CSS properties   you'll see a number of references to five here  in these Expressions there's one here there's   one here there's one here these are some of the  references that you'll need to update if you want   to show more than five items or maybe you want to  show less than five items so if you're going to be   changing the amount of items on each of these rows  then you want to make sure any of these references   like that that are all in the Expressions they're  not anywhere else but those expressions make sure   those are updated and you can adjust how many of  those you want to put on the row so a lot of these   Expressions aren't very complex but they are doing  a lot of math to control the positioning on the   screen you'll see here we're creating the anchor  tag which is our hyperlink itself this is the   clickable element it's referencing the URL field  here you see Target is equal toore blank so this   is going to open in a new tab which is always  nice if you're sending someone to some other   location especially if it's outside of SharePoint  so that you're not kicking them out of SharePoint   it's just opening a new tab that's always a nice  convenience thing and best practice then you'll   see another element here inside the anchor tag as  one of the children we're creating an SVG scalable   Vector graphic that is that honeycomb image you  see over here behind all of the text and images   if you remember we didn't create or upload any  image to be this hexagon it's all created on   the Fly by the browser using a scalable Vector  graphic and that's what this confusing string of   letters and numbers over here is that's the actual  drawing path for that hexagon don't ask me what   it means I've got no idea I don't do svgs but uh  if you do then you probably understand what this   thing is doing and here's another point where  we can customize this if you want a different   shape all you really have to do is come up with a  brand new SVG or find one on the Internet or take   an image maybe your company logo would work well  with this you can convert that to an SVG and get   the string from that SVG and put it right here  in the Json now you're going to want something   fairly simple you're going to want something that  doesn't have a lot of detail on the inside of it   so that our icon and the text will stand out but  other than that go crazy try out whatever you'd   like for this SVG and just see what you can come  up with and that's really left on this Json is the   div that's going to be housing our icon and text  you can see right here pulling in the icon value   from that particular list item and then the title  further down below and that's really all there is   to this Json it's really simple is there's not  a lot there but it is a good starting point for   making this your own maybe you want to extend  it out to six icons or you want to change things   around and maybe not have the icon at all maybe  you just want text all you would have to do is   delete the particular child element in this case  maybe the icon you delete that and then there's   nothing but text left you may have to adjust  a little bit like some CSS properties to get   it to position just right but just to demonstrate  how easy this would be let's go change this from   five icons across to six so let's go back in here  and I'm going to go to the view that we need to update switch over to Quick links and  then let's go back into the formatting   so I've mentioned before you're going  to have to find the references to five   and the expressions and change it to  six since we want to change it to six [Music] columns and let's see if there's any more down  here nope that should be it let's preview and   see there we go now we've got six on a row let's  save this and see how it looks on the homepage we   have to do a contrl F5 there we go so now we've  got six so depending on how many of these icons   you're going to be displaying maybe it does make  sense to stretch this out a little bit more across   the screen so that you can bring up the content  below it for a more condensed view so what did   you think about this I think this is a really  neat feature to add to your Internet to enhance   things improve that user experience make it look  flashy it's definitely not something that's out   of the box which is what a lot of people like they  like something that doesn't look like SharePoint   basically and I get requests all the time for  something that's completely custom they want   it to look unique and this was an ultra simple  way to get a custom looking quick links on an   internet with no coding really the most we had  to do was copy and paste and at that point you   can start tweaking and making this your own let me  know down in the comments what you think of this   what you would do to change this and make it your  own one thing that I've seen with other quicklinks   web parts that I think would be really cool to  do is to have an animation so that these little   tiles will flip around and show more text about  what this link is going to take you to kind of a   coin style feature but what do you think and if  you want to see another great Json solution then   click over into this video and let's start going  through that one as well Json is such a powerful   tool and it's very simple to learn anyone can  do it if I can do it then I know you can do it

Channel: Steve Corey - MVP

Views: 2,655

Keywords: list json formatting, json formatting examples sharepoint, json formatting sharepoint online list, sharepoint json formatting, sharepoint list formatting, sharepoint list formatting json, sharepoint online json formatting, sharepoint view formatting json examples, sharepoint view formatting json generator, sharepoint view formatting samples, sharepoint wiew formatting json examples, sharepoint wiew formatting json hide column, sharepoint quick links, sharepoint navigation

Id: fUCn1gajIzk

Length: 12min 23sec (743 seconds)

Published: Mon Jan 01 2024