ÃÛ¶¹ÊÓƵ

Transcript

So let’s get this started. So first off, again, good morning. My name is Raymond Camden. I am a developer evangelist on the Document Services team. If you have any questions about what I’m showing today or anything related to some of the other sessions that my team is going on, you can absolutely reach out to me. I have a blog at Raymond Camden. I tweet at Raymond Camden, pretty consistently boring about those nicknames. However, by some miracle, I was able to get the jedimasteratadobe.com email address. So you’re also welcome to send me an email there as well. I really like getting questions because I like to blog and share and stuff like that. So I definitely don’t mind you reaching out to let me know what you have questions on. All right, so let’s get started by talking about the problem and typically, the things that are involved in our career as developers is trying to fix some problems. So the problem that I want to talk about today is that you have PDFs on your website. And typically, what happens when you link to a PDF is that the browser can handle the PDF. I remember a long time ago, they did not. So that’s a good thing. But what you’ll quickly find out is that each of the browsers out there, they have their own particular way of rendering a PDF. And what you’ll see is that there’s no real good consistency between how the PDF is rendered. And now in general, the PDF itself, the content, that will look okay. But in terms of how you interact with the PDF, how you use the PDF, you’re going to see a lot of variation on there. So I went around and looked at that. And something else as well that you’ll see is that they leave your website. So you have your website, you have your branding, your marketing, and all that kind of fun stuff. And then all of a sudden, they view a PDF and they see nothing related to your site anymore. So again, all this is bad. So I went around and I took a couple of example screenshots of the same PDF being rendered in different browsers. So here you can see an example of Safari on a Apple machine, of course. Then you have Chrome, looks completely different. And again, the content inside the PDF is not changing. I’m talking about that Chrome that you see actually around the PDF. This is an example of Firefox. And last, my preferred browser of choice, Microsoft Edge. So all of these work. They work. But what we really need is a consistent solution. And luckily we have a consistent great front end solution for you called ÃÛ¶¹ÊÓƵ PDF Embed API. At a high level, what this is, is a JavaScript library for embedding PDFs. Now, to be clear, if you do not consider yourself a JavaScript developer, that’s okay. I’ve been using JavaScript for 20 years or so, and I still make really bad mistakes all the time. But you do not need to be an expert at all to use this library. And you’re gonna see multiple examples of that. This will give you control over the PDF rendering experience in terms of the size, how it’s shown and then how people interact with it. It also supports annotations and comments. So what that means is that your end user is gonna actually go into the PDF and they could write comments, they could annotate it, you draw it and things like that. And then they can actually save that PDF with all those annotations and comments baked in. You also get really, really detailed control to analytics and events. And based on how much time I have here, I don’t really go deep into that. But if you need to know things, for example, I have a 10 page PDF and I’ve asked people to read it. I can actually use the analytics to figure out how long people are spending with the PDF, how many pages they look at. If there’s a particular page where people just seem to drop off consistently, there could be something about that page that could be improved to help people keep going on that. And best of all, everything that I’m showing you today is 100% free. All right, so in terms of how you get started, you will need an ÃÛ¶¹ÊÓƵ ID, that’s free, sign up, no big deal. You will then go to our website, you can sign up and get a free key. Now, a couple of things to note about that key. It is going to be bound by a domain name. So if you want, you could actually create two keys, one for localhost, one for foo.com. You can also create a key that just has your top level domain name and then use that for a www, stage, dev, local, et cetera. If you have never messed with your internal host file, if you have no idea what that is, hit me up later, I’ll be happy to share some resources on that where if you had foo.com as your main corporate site, you can run local.foo.com on your own laptop and use the same key there. Now, because these keys are tied to a particular domain name, that makes it safe to use in your client-side codes. You don’t have to worry about doing weird stuff to hide that particular key. So how do we actually make use of the library? So the first thing you’re going to do is figure out where you’re going to load the PDF. In this particular example, I’m talking about one PDF on a website. Obviously, you can have multiple different PDFs, but to keep it simple, we’re going to imagine you just want to put one particular PDF on your site. So first, figure out what page it’s going to be on and where in the page that’s going to be. When you have done that, you want to annotate that with a div tag and give it a unique ID. ID should be unique anyway, but give it a ID that you are going to remember because you’re going to have to come back to this later. So next thing you want to do is load the library. Surprise, surprise, this will be a JavaScript library loaded via Scriptag. Just copy and paste that and put that into your website and you’re good to go. Then before you start doing anything, you’re going to want to make sure that your library has loaded. And here’s where things get slightly complex. So in our documentation, we show an example of listening for an event. ÃÛ¶¹ÊÓƵ underscore DC underscore view underscore SDK dot ready. And when that event fires, you can then do PDF type stuff, okay? So that works most of the time, especially for a simple HTML page. But something that you may run into, if you’re doing something with React or Vue.js, if you’re doing this more complex JavaScript type stuff before you write this line of code, that event may actually fire before you start trying to listen for it. And if that happens, then the code that you have in that event handler is never going to fire. So the second way of doing this is to actually look for a variable that we create in the Windows scope called ÃÛ¶¹ÊÓƵ DC. And if that exists, then you know that the event’s already fired. Otherwise, you can listen for the event. So the code that you see on screen here, this is typically what I always recommend. If I’m using a framework like Vue.js, for example, I will do it a bit different. I’ll check in the creative scope. Just something to keep in mind that based on what you already have going on your site, the library may load before your code is even ready to do stuff. So once you have confirmed that the library has loaded, first you’re going to initialize and load your PDF. And this is really the code that makes the PDF show up. So you see I have an example on screen here, two blocks of code, just a couple lines. I create a new instance of ÃÛ¶¹ÊÓƵ DC Vue. I pass it my particular key and the div that I created earlier. And again, that needs to be unique and you’ll be responsible for putting that into your template wherever it makes sense. In this case, ÃÛ¶¹ÊÓƵ underscore key would just be a variable somewhere else in my code where I put that particular key value I get when I sign up on our portal. Next, you’re going to run the preview file method. Now this can get pretty complex, but the simplest solution is to pass it content, location, and URL, basically where your PDF, and then pass a bit of metadata. And the minimum metadata is simply the name of the file. And again, you can do a heck of a lot more in here. We’re going to see a couple of examples of the options and stuff that you could pass in. I’ll also point out that it does not, your PDF does not have to be at a particular URL. It could be a file promise source instead. So if that doesn’t really make sense, a simple way of thinking is that, now I think a great example of that is that you can let the user pick a PDF on their system and say, hey, I want to actually preview that on the webpage. All right, so now for the code. And I’ve made my font size nice and big, so hopefully you all can see this. Let me get rid of this. So what I have here, and I’ll make it a little bit bigger. So I’m glancing over at the side here and kind of seeing what I’m, seeing the screen there. So what I have here is a fairly standard webpage, got HTML on top, I got a bit of styling. Let me preface what follows with the fact that ÃÛ¶¹ÊÓƵ did not hire me for my design skills. I am where design goes to die. So anything that you see ugly on this webpage is 100% Raymond Camden’s fault and not ÃÛ¶¹ÊÓƵ. It could be a heck of a lot prettier. But I did the very kind of basic CSS for my page. I also provided some CSS to the PDF display div so I could just control how big I want that on screen. Typically what you’ll do is you’ll look at your site framework, the layout, you’ll look at your PDF, you’ll play with this and you’ll find the best values for there. I have again, regular HTML. This is the div tag that I mentioned earlier about how I’m going to identify where I want on the page for the PDF to show up. And then I have my code. And again, I would think you could be kind of new to JavaScript and handle that. If you’re kind of new to JavaScript this arrow syntax kind of scares you a bit. You don’t need to use syntax like that. That’s just me pretending I’m fancy and know what I’m doing. But this code pretty much follows what I just said. I listen for the library to be loaded or I check to see if it already is. When either of those cases happen, I run a method called display PDF. And in there I create my view and I then point to my particular PDF. If I show this, oops, not that one. Getting ahead a little bit. We could see my PDF. Now let me just reload this real quick. There we go. All right, Edge was being a little bit finicky for me earlier. This is the PDF. And again, I wanted to show some CSS styling so you could see the contrast in terms of, the white background of the PDF. Honestly, I could probably size this a bit better. So there wasn’t quite as much stuff on the sides. We don’t limit you in terms of how tall and why you want to make your PDF. That’s completely up to you and your content. But you could see, I have my regular site, UI here, if I had menu options and things like that. If I had prompts for you to allow notifications because every website in the world, once they gave you notifications. I could have all of that and still have the PDF experience in here. And again, this is a complete PDF experience. I can click here and do download or print PDF. I’m not going to print this. But if I wanted to, I could also come in here and say, you know what, let’s add some comments. More cat pics, please. And go ahead and post that. And then if I wanted to scratch something out, like this is some boring text that I don’t want. I could do that type of manipulation and you can see it’s actually prompting me to save it. Recognize that I actually modified this PDF and it wants to let me know. I, in fact, I believe if I hit next, it’s actually gonna probably stop me until I actually save the PDF. But I could go crazy on this. I could then download the PDF and render it. And what’s kind of great, I did this demo before. I’m saving the PDF. I mentioned how the browsers kind of have their own UI. Edge actually fails to render the comments. And now I know that I have a valid PDF downloaded. It got the annotation, but the Edge browser, in general, a really darn good browser, but when it takes over, it doesn’t do a consistent good job of rendering. Yeah, I see I have a comment there. This would annoy the heck out of me, seeing that and not being able to view it. The actual file that I downloaded absolutely has all the annotations in there and all the comments as well. Oops, there we go. So that was kind of like the kind of default out of the box, just plain work time option. We definitely have multiple different things that you could do with how it’s rendered on the page. We have view options and we have UI control options. That’s kind of way mentally I bucket those two things. When it comes to view options, that’s the initial way that the PDF is rendered. The first option and the default is full window. Doesn’t really mean the full window. A better name for that would be the full div that you give it. And in terms of what size that is, that’s up to you. We also have a sized container. We have inline, which is gonna stretch everything out. And we have a light box, which is kind of like a modal view. All of this is done by simply passing an argument to our preview file. And you can see there, I specify what the embed mode is. And a lot of this will make sense when I actually show you a demo of this running. And by the way, I mentioned the browser and the embed recognizes that I modified it and it’s warning me, which I think is a great feature. So I’ll go and test too. This is the same PDF. And again, full window is the default view. And like I said, Edge, you are being a little bit cranky for me today. Come on now. I think I need to clear my cache. There we go, all right. So this is default. Notice that you could go through the PDF. You could read it as you want. Size container actually presents it as one page at a time. And come on demo gods, don’t let me down. You’ve been doing so well. And worst comes to worst, I will switch to Chrome. Okay. Everything worked earlier. All right. I make this a little bit bigger. All right, so switching to a different embed mode, size container will instead render one page at a time. And using this versus using full window really is based on the PDF that you’re using, whatever makes sense for it. Inline, as I mentioned, kind of stretches the whole thing out so I can still specify a width for my PDF, but notice it actually takes the whole thing and stretches it out. You do not want to do this on a 90 page PDF unless you hate your users. And hopefully you don’t hate your users. And then the last version of this is the Lightbox one. Let me show a better demo. So Lightbox essentially will take over the entire page, but let them kind of return back to it. So on this particular demo, I have a button that lets you decide when you want to show the PDF. And you see I have regular HTML content around it. I click show PDF, and you can see the PDF experience in there, I could still kind of see my website behind it. I haven’t left it. And then via either clicking that little X on the upper right corner or hitting escape on my keyboard, it goes away. And again, that code, and I showed it on slide, but just to kind of show you how that looks, I’ll go into the Lightbox one. But literally it’s one or two more lines of code where I specify that I want a different embed mode. Again, you have those four options. Which one you use really depends on your content and the rest of your site. So in terms of UI options, again, I kind of bucket these down into a few things, specifically disabling various parts of the menus and disabling parts of the panels. And as you could probably guess, this is going to be one more option that we will add to our preview file method where we could turn off and on various things. In this particular example, I have turned off the download option, the print option, the annotation tools, as well as the left-hand panel. And if we take a look at that, and I’ll show the code first, although it’s going to be pretty much the exact same there, but then I’m going to show this code. I’m going to show it in the browser, and then we could see how it looks if we tweak this on the fly here, because my demo’s gone great so far. I’m going to modify code because what could possibly go wrong with that? All right, test three. I turned off download, I turned off print, I clicked the three little dots, and they’re all gone. All my annotation tools are also gone as well. So again, when you would use this, it would depend on what you have in mind, what you do, and do not want your users doing with the PDF. I just got to show you how easy it is if I want to allow them to print but not download. I’ll just turn that to true. It defaults to true, but I want to see it. Reload, and there is print. So all in all, a pretty simple modification, not too much work. Again, you will need to look at what you’re doing, what kind of PDFs you have, et cetera. If you’re curious about me turning off download, yes, someone can still see that particular URL in the source code. You do not have to point directly at a source code. You could point at a authenticated service that would serve up the binary data and would not let you access it unless you’re authenticated. It’s not going to be perfect in terms of protecting. I could hold my camera up to the screen and take a picture of it, but it’s still going to stop most people from being able to download the bits and have it on their system. And it takes all of about two seconds, which is pretty darn easy. So more, so I did mention that we have support for event handling. Pretty much any interaction that you can imagine happening with a particular PDF, we give you access. So some concrete example of that would be, we’ve all seen the legal notices where we asked you to read the user agreement and agreed to it before going forward. Nobody ever does that. I mean, I hope we all, I mean, we’re friends here. I hope we all know that nobody ever reads legal text. But if you need to feel good about yourself that you’ve made people read that, you can know when a particular page is viewed. You can know how many pages are in that particular PDF. And you could recognize if there’s 10 pages, you could recognize when all 10 have been looked at. That does not mean that you could actually tell if they read it. You know, we’re not tracking your eyes and things like that. But we give you enough details about those events where you could even do things like, you know, the average person takes a minute to read each page. You’ve been on here and you went through all 10 in 20 seconds, most likely you skimmed that I’m gonna make you sit here and actually read it. Being a bit kind of sarcastic silly about that, but I know I’ve been on employee trainings before where they really wanna make sure that you read it and they don’t even allow you to go on until you have both looked at every page and to spend an appropriate amount of time, which for most of us who read fast is always way too much time. But you can do things like, for example, also notice when people select text. I built a great demo that unfortunately is broken where I allowed you to actually select text in a PDF, English text, and I used an API that would then translate that to Spanish. That particular API went down, not any of my PDF embed type stuff. But if you needed to know what the user has selected, if you want to actually select text, if you want to go to a particular page, concrete example of that would be is that if you have built a search engine and a person searched for something and you know that’s on page five of a 10-page PDF, you can link them to that particular page and when the PDF loads, automatically send them to that particular page and even, heck, highlight the text that matches their search. Now we have a great online demo where you can test all the different view modes. You can test turning things off and on. If you don’t like my cat-related PDF and you need something that’s a bit more serious for your boss, we have a very serious PDF. You can see financial legacy so you know it’s serious business time type PDFs. But you can go in here and you can see the different types of embed modes more clearly and you can also go in here and customize things that say, you know what, I don’t want print or download support. You can see it immediately in here and even better, what’s great, and I’ve been using our embed API for many, many, many months now but I will still go here and play with stuff because at the bottom, we have this generate code which just gives you the code that you can just copy and paste and just go to town with. It’s really nice, really handy, and again, even being experienced, I find myself referencing this as a way to kind of quickly mock up what I want to do. We do have extensive documentation and I’ll link to that as well. By the way, all of my assets are available. I’m going to figure out exactly how to share them a bit later but we do have excellent online documentation that talks through everything. For example, a lot of the analytics events that I mentioned that you can do, all of that is fully documented for you to play around with and experience. And just to kind of wrap things up here, the embed API, the PDF embed API is one of a host of really cool, extensive PDF-related stuff. We have multiple sessions here at this conference talking about this more in detail. If I could do this in 30 seconds, document generation API, a really crazy cool way to generate PDFs using Microsoft Word as a template. We have a session on that coming tomorrow. ÃÛ¶¹ÊÓƵ Sign API, I think most people are very familiar with ÃÛ¶¹ÊÓƵ Sign and the API is amazing. Our services API basically has every type of operation that you can imagine doing on a PDF and you see examples on slide there, so I’ll read from it. We have APIs for that. I’ve showed you the embed API and our extract API provides an incredible level of detail about your PDFs. Definitely not just the text but every imaginable piece of information from a PDF. Again, I mentioned that we have more sessions talking about this. I believe the next one coming up is my coworker, Ben, talking about ÃÛ¶¹ÊÓƵ PDF services API. I think about an hour from now, so pretty darn soon. But again, we have multiple sessions coming up going in depth about all of these particular services and I believe that I wrapped up just in time. I’m shocked because I’m very wordy and I’m just looking over here at the chat to see if we have any open questions. I see Ben’s been answering them. Thank you very much. I’m just seeing if Ben didn’t get anything. Ben is who I go to, Ben and Joel, my coworkers, for questions, so if they didn’t get it, you probably ought to look. I’m going to read it. Ray, it looks like there’s a question on the Q&A section. Thank you. I did not see that. Thank you. I appreciate that. All right, so I don’t know if you often see the Q&A, so I’m going to read the question from Joe. When using the ÃÛ¶¹ÊÓƵ PDF embed API with AEM, is there a way to share the API key for both the author and publisher environment? The client ID under Sling configs, but don’t see a way to have different keys for the author and publisher. Also, a way to set up a key for different run modes. Unfortunately, I can’t answer questions about AEM. That’s not something that I am aware of. If AEM supports any type of different environment variables for different environments, that would be one way I would do it, and that’s something I’ve seen in other systems out there. And I read that out loud, so if Ben knows the answer, hopefully he heard me and can refer to that. But if I was brand new to AEM, I would look at the docs for environment variables and see how they handle production versus stage, and that is where I would store my embed key. Hopefully that helps a little bit. Thank you again, Alicia. Oh. Well, I think I am at time, which means I want to thank all of you all who showed up. Thank you all for your questions. Thank you all for being here. Definitely stick around. There are some amazing sessions coming up. I appreciate your time and attention. Thank you very much.