Building Interactive Experiences in Kentico with VueJS

Introduction

Building interactive websites that are agile and provide users the exact data they need is critical to a great customer experience and journey. The easier it for a user to find the right information and content tailored to their specific needs, the shorter is the the customer journey and eventually builds a strong funnel for future growth. Exemplifi has been building interactive websites for some time now and across multiple Content management systems . In our latest insight, we share our story of building an interactive website using Vuejs in Kentico.

VueJs, a reactive front-end framework is integrated with Kentico, a headless CMS to build interactive experiences in a website. Creating a news section in one of our client EPIQ Global's website involves integrating Vue with Kentico, creating VUe components, using Kentico API and more. Read till the end to learn more about building interactive experiences in Kentico.

The Client’s Use Case 

Our client EPIQ Global is an enterprise software company that provides legal products to clients globally. They wanted to launch a news section on their website that would have various news articles organized by industry. 

When the user clicks on an industry on the right hand side, the list of articles would be automatically refreshed on the left to display only the relevant articles. 

The Technical Background

The EPIQ website runs on Kentico and is hosted on Microsoft Azure. The News Template is designed  as a two-column template built on Kentico’s portal engine and webparts. Each column has a corresponding webzone in which webparts can be added.

We added the following webparts on this template:

• FeaturedNews is a repeater webpart that is configured to display a news article marked as “featured”. 
• “Partner” is a static HTML webpart that displays static text with a background image.

To learn more about webparts, you can checkout our article on How to Build Webparts and Widgets in Kentico

Why did we need a reactive JS framework like Vue?

Complex user interactions involve the manipulation of a lot of HTML Document Object Model (DOM) elements.  When a user interacts with the page, the browser has to update these DOM elements and render them on the screen. Updating the DOM using traditional .NET and javascript is quite cumbersome.

Delivering heavy interactive functionality is possible in the .NET framework that Kentico is built on. To achieve this, we would have to build the various sections in Kentico requiring multiple custom webparts and associated custom queries. Furthermore, we would have to make these webparts communicate with each other via javascript and specifically AJAX. Generally speaking, we have seen that this creates performance issues. 

An alternative is to use popular reactive frameworks such as VueJS and ReactJS. They are the latest in JS frameworks that are much more powerful than Vanilla JS described earlier. We selected VueJS to deliver this functionality. 

VueJs operates utilizing the “Virtual DOM” concept.  Vuejs updates the virtual DOM instead of the real DOM when the stage changes. and offers the ability to control the timing at which the Virtual DOM is rendered. This makes the HTML page rendering pretty quick and improves application performance.

Integrating Vue with Kentico

We integrated Vue with Kentico by simply including the vue.js file in the head section of the master template. A vue app file called epiq-vue.js is created inside the project directory and included in the head scripts as well.

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script  type="module" src="~/epiq-discovery/epiq-vue/epiq-vue.js"></script>

We then initialize the vue app within the epiq-vue.js file as follows:

var app = new Vue({
  el: document.querySelector('#epiqvue'),
  data: {
    message: Kentico Vue Integration!'
  }
})

‍

In news template layout a container is declared with id epiqvue to initialize the vue app and vue components <discovery-news> and <industry> are created and declared to render the news listing and category filters as shown in the code below:

<section class="main-content-wrap bg-white news" >
    <div class="container" id="epiqvue">
      <div class="row">
        <div class="col-12 col-lg-8 content">
            <cms:CMSWebPartZone ZoneID="ZoneFeatured" runat="server" />
            <discovery-news :fetchnews='fetchnews' :setpage='setpage' ref='news'></discovery-news>             
        </div>
        <div class="col-12 col-lg-4 sidebar">
          <cms:CMSWebPartZone ZoneID="ZonePartner" runat="server" />
          <industry :updateindustry="updateindustry"> </industry>                                
        </div>
      </div>
    </div>
  </section>

‍

This straightforward template syntax initializes the vue app in Kentico. The data and the DOM are now linked, and everything is now reactive. We can test this by opening our browser’s JavaScript console and set app.message to a different value.

The news listing section is componentized into separate two vue components

• Discovery news
• Industry

These two components are declared in epiq-vue.js app file with necessary props and data as follows:

Vue.component('discovery-news',  {
	template: `  `,	
	props: ['fetchnews'],
	data() {	}, 	
});

Vue.component('industry',  {
	template: `  `,	
	props: ['updateindustry'],
	data() {	}, 	
});

The fetchNews( ) method gets News data from the Kentico API using the fetch( )  method. It then structures the response data based on our needs. In the code below, we show how to consume the News JSON data with the fetch( ) method and assign the response data to the News Component property. 

fetchNews(){
	let myvalue =JSON.stringify({"culture":"culture"});			
	fetch('/DiscoveryNews.asmx/GetDiscoveryNews', {
		method: 'post',
		headers: {
			'Content-Type' : 'application/json'
		},
		body: myvalue
		}).then((response) => {
			return response.json()
		}).then((data) =>{
			let resData = JSON.parse(data.d);
			let newsData = [];
			this.news = resData;
		}).catch(function (error){
		console.error(error);
	})
},

The actual news JSON data format is shown below: 

‍

[
  {
    "Id": "16790",
    "Title": "Imaging is changing the way we see medical issues.",
    "Link": "/en-us/news/Imaging-is-changing-the-way-we-see-medical-issues",
    "ReadTime": "5 Min read",
    "Date": "11/8/2021 12:00:00 AM",
    "Image": "/EpiqDiscovery/media/discovery/easy.png?ext=.png",
    "Category": "healthcare/Pharma",
    "Description": "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
    voluptatum ducimus qui blanditiis ducimus qui blanditiisdeleniti atque.At vero eos et accusamus et 
    iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum ducimus qui blanditiis ducimus 
    qui blanditiisdeleniti atque. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
    praesentium voluptatum ducimus qui blanditiis ducimus qui blanditiisdeleniti atque."
  },
]

Delivering the interactive experience with Vue

When the user clicks on the industry list on the right column, several things happen:

• The clicked category becomes active
• The News list (on the left) will be filtered based on the selected category.
• The pagination control also gets updated based on the latest results

This is how the screen looks before the user clicks on “Search by Industry”

After the user selects an Industry, it looks like this:

The news list is now filtered by industry and the pagination is updated as well.

The architecture that achieves this functionality is shown below:

• The computed property fetchNews is triggered when the user selects an Industry value
• The Vue Compute Method notices the changes and updates the Virtual DOM and calls the filterbyIndustry ( ) method. 
• The filterByIndustry()  updates the news list, as shown below

‍

methods: {	
	filterByIndustry(news){
		if(this.industryfilter!='All'  ){
			return news.filter((item) => {
				return item.Category.toLowerCase()==this.industryfilter.toLowerCase() 
			})
		}else{
			return news;
		}
	}
},
computed: {
	fetchnews: function() {
		let news = [];
		news = this.news;
		return  this.filterByIndustry(news); 
	}, 
}

• The newy filtered results are then displayed by the vue template and the pagination is updated to reflect the latest results.
  
  

Summary

Epiq Global is the leader in providing technology enabled legal services across the spectrum of  corporate restructuring, cyber security, busines transformation and more. As thought leaders in their field, we wanted to enhance their website’s news section, which provides users with latest cutting edge information about the industry.

In this project, we’ve built a customized News page with functionalities of filtering, mobile responsiveness, and quick loading times coupled with a user interface that provides a seamless experience for users to find the news content they are looking for - quickly and seamlessly.  Combining the powerful capabilities of VueJS’s and Exemplifi’s expertise with Kentico, we were able to build this record time, and now you can too!

‍

If you liked this insight and want more updates, we’d love for you to join us on Linkedin at Exemplifi, Facebook at ExemplifiSites or Twitter at ExemplifiSites.