Microsoft 365 Community Column and view formatting tips, 5 Mar 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: String length detection trick to extend your column and view formatting options

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on March 5, 2020.

Presently the Length operator does not return the number of characters of text in a selected list field. In this 10-minute demo, Chris Kent shares how to configure (trick) the IndexOf operator to return the length of a string in the field. Special thanks to Alberto Suárez Caballero http://albertosuarezcaballero.es/ for the “trick.”

Given this new capability, Chris suggests we can now easily add links to keywords in a list-based FAQ. Essentially, search text strings for keywords, for each keyword found, add link to additional information. Watch this demo and then get the “FAQ format” sample in the GitHub PnP sp-dev-list-formatting samples library.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• "FAQ format" sample | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/ (to be published soon)
• "Custom header format" sample | https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/custom-header-format
• Custom header demo | Chris Kent (DMI) | https://www.youtube.com/watch?v=4uQyYQp8G2I

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

A

Well, hello, everybody, I'm, Chris, Kent, there's all my stuff, we're gonna talk about some cool, this formatting stuff. In fact, this is a pretty cool trick that I saw in the documentation added by Alberto Suarez. There you go, he came up with this I thought it was a really cool thing and I thought I'd show it off here. So let's take a look forward to talking about.

A

So we go to our class of warhorse, the same right and I'm going to take a look at rdfa cues list right because even horses have trouble baking their content good enough to not need a fake use. Alright, so they put this together this very exciting list here, let's zoom that in there we go, you know they've got these epic hues and this is okay. Alright, you can click this and you know at the info panel and then you can read right.

A

Here's your question and answer and that works and a lot of people do it this way. Pass you! You know you might have changed the format in a little bit using one of the the kind of inbuilt styles like bulletins or newsletters style, but that's not really available here module is so. What can we do? Alright? So let's take this trick and Alberto and see if we can apply it. So the first thing is: we just see what it is. We format this column, let's grow that over, so you can see it.

A

Alright, we look at a little word here. One of the problems we've had right a couple of weeks ago we showed off how to do substring, which is cool where I got the index of so you kind of find out where things are.

A

One of the things that's really missing, though, is the idea of links nice a linked of a string, so we just type in our quick sample here like home type of div and I'm gonna, say text content in this case, we'll just say: alright equals we'll put our at current field and then we're gonna. Add to that. So we could show it a little space. You will add.

A

So we have this idea of a length operator right, so you would think you could today at current field length right- and so we would expect from that is right. Battle has six words, six letters. Hugs has four. This one doesn't have a keyword right, so we just picked 6 0 4 right, but we preview that instead length just tells us if it has a value or not.

A

When it comes to strings, it's really meant for array type objects, so it's meant for multi, select person, fields or multi, select, choice, fields, and that self will tell you how many atoms there there are all right. So what do I want? What do I do if I need to find out the length of this field right, which comes up allowing you're trying to do some of these substring operations?

A

Well, that's where we can use our British trick, which is pretty awesome so instead of saying links which again is the wrong operator in this case we're gonna, say index of all right.

A

So if you recall index of you passed in what you want to look inside, so in this guy's gonna look inside a current field, all right and then you're gonna pass in what you want to look for and what it'll do is it'll return, negative one if it's not found or to return the index right so sergeant zero of the character for where it finds it.

A

So in this case, we want to look inside a current field, but we're gonna trick it by adding a character on the end of this case, I'm going to add a pipe to the end and then I'm gonna actually look for that pipe.

A

Because any character you want it's obviously character. This should not be in that field. Normally, if we run that we suddenly get the answer right, because it's saying the index of this kind of made-up string, we made on the fly alright, so the end of that is the links. So that's pretty cool. So it's a little hard to read right, it'd, be much easier if it just said length, but either way. This is a really neat trick. That albert has come up with right, so I'm using pipe because I generally don't type pipe.

A

But again you can add whatever character you want here right, but not a work. So what do we do with that right? How do we use that to our advantage? Well, we can do things you know inside our text. So let's get out of this column format. You'll notice here got a quest classic question and answer got a couple of their fields here, which we'll come back to all right. If we just for wanted to do a simple FAQ list, all right, we might come here and format the current view, and there is a sample.

A

The FAQ for methods available to you or will be after this call it Advanced Mode we're just gonna paste in our row formatter here. This is pretty much just display logic, we'll take a look at it. Alright, if we preview that alright, we see this- you know nice format. Here we get our question all right. We got rid of those column headers and the selections writer questions really big and then here's our answer and that's neat right. That's pretty awesome! Now none of that use using that length trick all right.

A

That's what we're gonna come next, so this is cool, but what if we want to do something? A little more fancy with like inside here right? What? If we saw the project, cortex demos and we thought that looks awesome, but it's not out and I want to have a very, very bad version of that. Well, good news! Now you can so, let's take a look at what we might do with that again. This is just a couple of divs here in a flexbox. You can take a look at that form of a chance.

A

What if we said, we want to say anytime, this keywords are mentioned like battle or hugs inside this answer, but actually like it to link somewhere right, we'd like to show a little more detail about it all right, so we want to insert links inside that content now in the past, with list formatting. That was pretty well impossible.

A

Just because we couldn't do the links and some other things where we can kind of build these sub strings. We can't really kind of break it apart now, berkos trick, we've definitely can't let me copy a new format, which is just that ethic use, but with some advanced stuff, which we'll take a look at. Let's preview that now we start to see something really interesting here right. So now, whenever the word battle comes up, we actually get. You know now.

A

We've got multiple spans here inserted with links just on where those go so I can see. You know a definition here in the tooltip. You know right here. I can click that you know it will go to search instead, so I shouldn't have clicked that, but here's all the apparently I've mentioned hugs several times in the word horses site. So we'll go back here. Just do that. Tory were video here again kind of a miniature very bad ghetto. Is that right get to version of the project cortex.

A

So let's preview that again we'll save it actually. Now, let's take a look. What are we doing? One of these terrible formulas all right. The reason they're so terrible is because we're trying to do it multiple times. So if we just look at the first one all right, you can see here here's our children of the answer right. So we're saying like hey.

A

If, if you don't have the keyword link of the keyword setup, all right then just show the answer: what's happened in the second one, so that's pretty easy, but obviously, if that's not the case, we created a different dip which is gonna hold all of our spans right. So just the opposite check here and that's what happens here and so we do. Is we come in and we take the first. We do a substring I would say what we want to substring of.

A

We want to start at the beginning, which is zero, and we want to go up until wherever the first time we find that keyword right now notice we're doing this lowercase thing, because all right you can see here we get a capitulation of a lowercase H. We want to make sure we get that all right, so we're gonna grab. That first part that gives us like this. During in a space, then we've got the idea of a link here. All right now. First, it to make sure is the key we're actually there.

A

If it is, then we just want to pull out that keyword now. This is where we start to see some of that interesting link. Stuff come into play here. You can see it right on the end here which again it says, index o, which makes a little confusing, but what we're doing is we actually are saying after you look through the first part right so start after that, first part that we just did now look for that keyword and grab that and put it out there.

A

Now we want to make sure we take that, instead of just putting the keyword in because we want to maintain their formatting right when they do capital ages or they lower part. Or if people are you know putting acronyms and sometimes they capitalize the first one or not the other ones. You want to do all that now gets crazy and again I'm gonna. Let you guys go through this format later, as we go deeper and deeper, because we don't really have the idea of variables.

A

We don't have the idea of Kyle, you know one after the other, going through it and kind of divided up so each time we have to divide that string up into all the different parts and analyze it from there. But the whole idea is not to go through horrible formulas that are hard to read in this box, but to show you what things might be possible when you add a Libertas length trick alright. So let's go back to our slides, very exciting, Thank You America.

A

So here's the string length trick just to review all right, so it's using the index of and basically you're, throwing on a dummy character onto whatever string, you're trying to search inside of and then searching for that dummy character, and that will give you the length of whatever you passed in right. So it's not a true length and if that special character shows up- and you might get some false positives right so best to pick something- that's not really in that field.

A

If this is something you need to do right and then you can use that inside the substring or other index of or some of the other operators like the join operator, other string operators. We have to do some really advanced, really cool things, all right, so some resources for you. So the FAQ format, which is actually not on the site. But it will be by the end of the call something you can take. A look through see what those forms look like and that's pretty much it for me. Thanks to.

B

Lent excellent, great Chris on that one and Thank You Alberto for the nice trick as well. That's good to get recorded as well, and obviously it might be that we'll come up with the length operator sooner or later.

B

We can expect that to happen, but until that happens, then this is what you can do and again, by the way on the key top issues and keys are samples which is the key table conversations as SB devilish formally, it is actually the most used samples what they have in key table, so a lot of people are actually using some using them so clearly a lot of value in them. So thank you. Thank you. Thank you, Chris for coordinating that work as well.