Press "Enter" to skip to content

Using ReactJS in K2 (Carousel Control)

0

I decided to implement something else with ReactJS and below I will describe how to create a ReactJS control in K2 to display Carousel of images. The approach was tested in K2 Five and I assume should also work in the K2 Cloud. This is especially great for K2 Cloud, where you do not have any possibility to implement a custom control. Another nice thing about this approach is that ReactJS will load the images from the SmartObjects, exposed through the SmartObject OData API.

From the technical perspective the following will happen:

  1. User opens a form, which loads ReactJs bundle file into K2 with the Carousel control inside, written with ReactJs.
  2. The Carousel control queries OData API and receives a list of URLs to the images, stored in this SmartObject.
  3. The Carousel control renders itself and you see the following:
k2-react-carousel

And now let me explain the basic steps, how I implemented all this. I will not describe all tiny details. If something is not clear, you can refer to my previous ReactJS post – Using ReactJs in K2 (Masonry Layout) or contact me directly 😉 Let’s start.

1. Expose you SmartObject with images, via the SmartObject OData API.

I created a basic SmartBox SmartObject and added a couple of images. The name of my SmartObject is FileTests. This SmartObject has an Image property, where the images are stored. I added it to the SmartObject OData API on the Management Site:

OData API

I can navigate to the url ‘https://k2.denallix.com/api/odata/v3/FileTests‘ and see a json with its contents.

OData Response

2. Prepare a K2 View.

Since React by default selects an HTML element, inside which the full application is rendered, I added 2 literal Data Labels onto the view:

  • react-control-js – will contain a script tag, which will load the bundle.js file, i.e. a built ReactJs app.
  • react-control-root – will be used by React to render the Carousel inside;

3. Create ReactJS application with a Carousel Component

I used the same boilerplate, which I created for my previous article. You can find it in my GitHub repo – carousel branch. Here are some important points to take into account, when creating the React Application.

Change the element, where our application should render.

In my code you can find this in the index.js file. I am searching for the ‘react-control-root‘ element render the React application there:

react-responsive-carousel

Powerful, lightweight and fully customizable carousel component for React apps.

componentDidMount()

This is the standard method from the React Component life-cycle. I am using it to do the following:

  • Load the data from the SmartObject via OData API.
  • Parse the data in order to extract image urls.
  • Update the component state with the data.

render()

This method is also an integral part of every React Component. Here I am rendering the Carousel component, sending an array of extracted images into the component. You can see in my code, how I am doing all of the mentioned above:

After the React application is ready, you need to build it in order to obtain 1 bundled js file.

4. Add ReactJs into K2

After I built everything, I committed all my code to GiHub, including the bundle.js file in the Public folder. With the help of a nice jsDelivr service, I can expose the bundle.js file as a CDN link. Since I committed everything to a separate branch, my script tag and the url, which I use inside a literal Data Label react-control-js, look like this:

<script src="https://cdn.jsdelivr.net/gh/dudelis/k2-react-control@k2-carousel/public/bundle.js"></script>
Carouel Example

Check also my other posts, so that certain steps can become more clear for you:

Leave a Reply

Your email address will not be published. Required fields are marked *

12 + seventeen =