Press "Enter" to skip to content

Using ReactJS in K2 (Carousel Control)

2

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:

  1. Ian Ian

    Hi,
    I have recently taken up a new position at a Company in the UK, where the business have been permitted to carry out uncontrolled citizen development. One of the applications requires some modifications that effectively will involve a re-write. The underlying SQL architecture is lacking in any control or design guidance. I have looked at your carousel and to me it is the ideal K2 solution to replace their externally hosted mock-up. However I would prefer to use SQL Stored procedures to capture the data at source, supplying the smartobject with the pre-filtered list of images. However I have never used the OData API and as such I’m struggling how to swap out your code for the sproc equivalent. Is this something you can advise on or at least point me in the right direction, please?

    • Konstantin Fukszon Konstantin Fukszon

      Hi Ian,
      So technically, you do not need anything specific here. You need to do the following:
      – create a stored procedure in SQL (let’s say, that returns a list of items)
      – Refresh the Service Instance
      – Add the List method to one of your SmartObjects
      – Expose your SmartObject as an OData endpoint – you can do this in the admin portal. There you will get the link.
      – Use the link inside your solution.

      Please, contact me at fukszon.kostya@gmail.com, if you still have problems with that.

      BR.
      Konstantin

Leave a Reply

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

11 + fourteen =