Background:
We've created a dependency to use Webslides.tv in first part of this article. And now we enter the exciting part of our journey with Webslides. Let's jump right into it.
Creating a Widget:
Let's start by creating a widget. Navigate to "Service Portal --> Widgets" and create a new Widget. Let's name it "Webslides", give an ID as "webslides" and add some description for our future self to make sense of it. 😉 Do check the "Has Preview" checkbox to easily be able to verify the changes. Keeping every other thing default, let's save the record.
Once saved, we need to add the Angular Dependency. So, go to the "Dependencies" related list and click on "Edit", search the "Webslides.tv" dependency we created earlier and add it as a dependency for our widget. With that, we're set to start creating our own slides.
Let's start by setting up basic structure to start creating slides, add below lines of code in widget's "Body HTML Template" part.
<main role="main">
<article id="webslides" class="horizontal">
</article>
</main>This is the crux of most of the presentations. To add a slide is create a <section> tag inside <article id="webslides"> tag. Every such parent section tag would indicate a new slide. If you'd have noticed, we can also specify the order in which the slides should be arranged. We're using the normal "horizontal" tag in this case, which will arrange the slides in classic one after another format. We could also specify the class "vertical" and make slides appear one below another as well.
Let's move on to our first slide, add below HTML code inside the <article> tags.
<!-- Slide 1 -->
<section class="bg-black aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/JCWHWjP8u2w/')"></span>
<div class="wrap">
<h2 class="text-landing"><strong>Slides on Now</strong></h2>
<p class="text-intro">Create engaging presentations on Now platform.</p>
<p class="text-intro">- Mandar Kamtekar</p>
</div>
<footer>
<div class="wrap">
<span class="alignright">Photo by <a href="https://unsplash.com/@julimoreira?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Juli Moreira</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></span>
</div>
</footer>
</section>
Let's take one line at a time. As mentioned earlier, each section is a slide. So, we create a new slide with our first use of section tag and we specify two classes in it. "aligncenter" as the name suggests centers the content on the slide. "bg-black" enables us to add a black tint to the slide background.
We can add an image background for entire slide. We do that by using a span tag with class "background" and specifying the "background-image" style. We are using images from the amazing yet free website - Unsplash. We can control the opacity of the image by classes "dark" or "light", each adding a tint of black or white to the background image respectively.
For main content of the slide, we add a div with a class of "wrap" to specify that the following content should be separated from the background. Inside, we use normal HTML tags to specify the content. Some common webslides classes aid us in simply giving content appropriate weight. Class "text-landing" specifies the content that will get higher weight. Class "text-intro" specifies the content that will add introduction around the landing.
To allow the Webslides to do its magic, we also need to initialize an object of Webslides class. I've noticed the screen flickering when the page loads, so I added a timer of 3 ms to load the object. Copy below code inside your client-controller.
api.controller=function($timeout) {
/* widget controller */
var c = this;
$timeout(function() {
window.ws = new WebSlides();
}, 3000);
};
That's it, with these lines our slide will look something like this.
Now, as mentioned earlier, we're using the images from Unsplash and the least we could do for using these amazing images is add an attribution. We do that with a <footer> tag. A div with class "wrap" inside footer does that job for us. With "alignright" class, we can easily align it along the bottom row. Pretty neat, right?
Well, to provide some more examples of how easy it is to arrange content on your page, let's take example of another slide.
<section class="fullscreen">
<div class="card-50">
<figure>
<img src="https://source.unsplash.com/nLXOatvTaLo/" alt="ThinkNow" />
<figcaption>
<span >Photo by <a href="https://unsplash.com/@earbiscuits?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Juan Rumimpunu</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></span>
</figcaption>
</figure>
<div class="flex-content">
<p class="text-intro">Not convinced yet? I'll list down a few more reasons</p>
<ul class="flexblock reasons">
<li>
<h4><strong>It is Fun</strong></h4>
<p>Did I mention it is much more fun to code your slides</p>
</li>
<li>
<h4><strong>Prebuilt Components</strong></h4>
<p>An array of pre-built components ready for your perusal.</p>
</li>
<li>
<h4><strong>Play with CSS and HTML</strong></h4>
<p>Didn't find what you want, well you can play with CSS to get the desired effect.</p>
</li>
</ul>
</div>
</div>
</section>
In this slide, we wanted to use the card layout. By simply adding a class "card-50", we split the slide vertically. In first part, we add an image and in the second we add the text content. In fact, in case of text content, just by adding a class "flexblock reasons", we can neatly list down all the reasons. And the outcome will be something like below
This should be enough to get you started. Optionally, you can create a portal and add a page with our widget in it to directly be able to access the presentation. And that's pretty much it from my end. You can find a completed example of above slides in the attached update set.
For more details, you can dig deeper into the source code from Webslides.tv site. I would love to hear your feedback for the article.
