Microsoft 365 Community Community Demos, 21 Nov 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: QR Code generator for list items solution with SPFx

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on November 21, 2019.

In this 12-minute video, Hugo Bernier demonstrates a React extension that generates a QR code for a given URL pointing to a document, website, SharePoint library, etc. The presenter will post an article on this topic shortly at https://tahoeninjas.blog.

Presenter: Hugo Bernier (Point Alliance) | @bernierh

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

Hi everybody, my name is Hugo Brandi hey. This is me on the on the corner: there I'm I work for a company called Point, Alliance and I'm I'm, a geek I, love coding, I, love, SharePoint and I love, tweeting and writing samples about it. So this is my my tweet handle and my blog I'm usually pretty active, except recently, because I've been on the on the conference cycle, I will be presenting.

A

If anybody of you are in Toronto over the this weekend, I will be presenting at the SharePoint Saturday in Toronto I'm, actually doing two presentations at the exact same time, I'm not quite sure how I'm gonna do that yet. But that's what the schedule says and also for those of you who are interested in contributing to to any PMP and are kind of scared about how to get started. I will be helping David Warner with tomorrow's session on sharing is caring. I'm sure David right now is probably sharing the link okay.

A

So what I'll be talking about today is an extension that I published on the SP dev effects extensions, so the react command key our code and what it does is actually generates. Qr codes and the reason why I'm doing QR codes is because, in a lot of countries, I live in Ontario. So in my province, bylaw organizations have to post all sorts of posters and things like that. For example, the health and safety laws actually say that we have to post information about the health and safety committees.

A

You know the guidelines and things like that, and that's actually in the law itself, where you have to post you.

B

A

Of paper that lists all the the members of the joint health and safety committee, so what organizations usually do is they'll actually create a you know, piece of paper and they'll actually post it on the boards at the in the lunchroom, and things like that, and you know two things you can notice here. First of all, you can tell that I'm Canadian by the number of please that you that appeared my my document here, but the other thing that you can notice is that and I.

A

Don't know why people do this, but people will actually print pieces of paper with a hyperlink on the piece of paper. As you know, I don't know if they are expecting people to click on the link or something like that. Well, the problem in here is, as you can see in this URL, the URLs can be pretty long and they're pretty hard for people to to remember. So. How do you handle that?

A

So what I did is I created a extension that you can add to any library any whether it's a page library or document library which allows users to generate QR codes, and so the way works is the user selects the QR code command and then the first thing we look at is: is there anything selected if there's something selected, the user selected one document or one page?

A

What we'll do is we'll generate a QR code for that selected item and we'll give it to them so that they can copy it and paste it on a document or something like that. If the user didn't select anything, then what we'll do is we'll generate a QR code for the document library itself, because sometimes maybe what we want to do is we want to say, hey everybody. You know check this link for the list of policies that are available or things like that or go to the site right.

A

So that's what I will be showing you right now, so I was planning on going directly to the code, but I guess I should probably show you what it does first. So this is an example of the same document that you saw before this is the list of committee members.

A

You know and it's available in a in a site, page library, which is what you see here. It's this document right here and if you select the document, you'll notice that there's a QR code extension that appears and when I click on that extension, what it does is it actually, you know, I stole the exact same style. Is the copy link behavior, but what it does. It generates a QR code for this document.

A

It copies it into the the clipboard and then it allows users to either copy again in case in case they want to copy it again or they can download the document. So what I'll do here is I'll just download it. It's called QR code 17 and then to show that I'm not lying about this I found this really cool website by las laser lászló that actually allows you to choose a QR code and then read the URL for it.

A

So if I click on my downloads here and I pick a QR code that I just downloaded what you should see is it gives me a link to the same page that we were showing before so I'm, not cheating.

A

If I don't select anything, you can see that I still have a QR code that appears here and that QR code is actually pointing to the document library. So if I wanted to send people to this- and this applies to also document- you know not just pages and the thing that I should point out- is they also did it so that those QR codes or that extension will appear on the context as well?

A

So you can do that all right. So, let's talk about how I did this all right? So what I did here is I created a an extension and the extension is actually pretty simple.

A

What it does is it when there's only one command in my extension and when the command gets called I get the page context, because I'm going to be using the page context first for generating some information, I also get the URL of the site and I generate the relative URL of the site, because I'm going to need to do this, to rebuild the URLs here and I also get the root of the URL.

A

But then what I do is I actually look at if the number of selected rows is is greater than 0. You know do this here, which is get the relative URL of the document. That's been selected, get the file name of the document. That's been selected because I'll actually need to be displaying the file name and I'll also want to use that so I can use a disposition later and then build an absolute URL now I'm, not necessarily proud of this code. Here, I'm just kind of aggregating.

A

The thing I should probably use a better approach, but I wanted to keep the code as simple as possible. If there's nothing selected here, in fact, this code, we would probably handle if more than one items are selected. But you know what I do is I just get the relative URL for the list and I just generate the URL for the list. The cool part here is this here, where I could generate a new dialog object and I pass it the filename, the absolute URL and then I call show.

A

So why am I using a dialog? Why am I not using a pain is because I want that behavior that will pop over the whole screen and I want to be able to dismiss that dialog by clicking away from it again.

A

I stole the exact same behavior is the the copy copy link behavior in the SharePoint library, which is right here.

A

I wanted this exact same behaviour right. So when I do this here, I want it I want it to be a dismissable dialogue like this. So how do you get dismissible dialogues, I generated or I? Sorry I created the class called QR dialogue and what it does is. It extends the out-of-the-box base dialogue and the cool thing about the base. Dialogue. Is that it does. It does a couple things. One is that it has a get config method which will actually look at the configuration that needs to be passed a dialogue.

A

So, in this case I'm saying I, don't want it to be blocking I want to allow people to click away from the dialogue.

B

Here you go one second I think we might have lost your audio.

A

All right, someone muted me: okay, so I just generate the past. The information I'm going to need and I actually pass a relative or a reference to the parent element, because I want to be able to bind by my position when I generate the dialogue and then the dialogue content here, what it actually does if I go all the way up and Scully sorry for the scrolling here, it's actually a very simple dialogue, so I used the call-out method and I just generate my buttons for closing and I use.

A

An extension called reactive react component called QR canvas that actually generates a canvas object with whatever URL that you want, and then I have my my button here for copying, which calls copy and my button for downloading when I click on download, which is a little bit further. Actually, let's start on copy when I click on copy.

A

What I actually do is I create really quickly a div element and I actually insert an image and an element where I copy the URL to the QR code and then I actually select the image from that HTML element and I copy it. Using the clipboard method of the browser and then I just hide everything, and if I, if I, actually delete I, just actually generate a download URL for this. So this is like a super quick review of what we're trying to do.

A

But again what happens if you, if you use this, is you can now? You know, create your your posters in the office and you can actually just generate QR codes by either downloading the QR code, like I, showed you our copy and pasting the QR codes again, my name is Hugo. If you have any questions, please don't hesitate to tweet me, I'm, usually pretty good at responding and please visit. My blog I will actually be writing a blog post about this whole thing. That's it for me back to you, Patrick awesome.

B

Thank you very much, really a cool thing there to see a QR code getting generated, I think there's a lot of applications for that. So it's gonna be a great sample for people to check out.