Forum Discussion

Gursimrat's avatar
Gursimrat
Leader
11 years ago

Add kudos button Via REST

We want to add the kudos button on the post on home page which we have fetched via REST calls, is this possible that I have a kudo link in my custom component in front of each post which when clicked...
cblown's avatar
cblown
Boss

Quick answer is yes - but you need to manage all the states yourself - such as already kudo'd, can't kudo your own post etc. This while not impossible tends to be a lot of work. The lads at Lithium might have a confiuration way to add kudo buttons at the list view level - not 100% on this though. HTH

Henrik's avatar
Henrik
Advisor
11 years ago

Hi Gursimrat,

 

Yes you can!

 

First, as Chris said, you need to manage all the states yourself. In our case, we are managing 4 states:

  1. The user is anonymous (when he clicks on the button, we invite him to log in)
  2. The kudos button is disabled (end of a contest, user rights, etc.)
  3. The user already gave a kudo
  4. The user can give a kudo

 We use freemarker to get the kudo's status:

<#assign kudo_status = "anonymous" />
<#if !user.anonymous>
	<#assign kudo_status = "disabled" />
	<#if rest("/messages/id/${topic_id}/kudos/give/allowed").value == "true" >
		<#assign kudo_status = "kudoed" />
		<#if rest("/messages/id/${topic_id}/kudos/for/users/self/count").value?number == 0 >
			<#assign kudo_status = "enabled" />
		</#if>
	</#if>
</#if>

 

Regarding the last state, you can use AJAX and the Lithium API to allow a user to give a kudo. Here is a quick example where the "Topic" object contains all the information about the topic (id, kudos count, etc.):

 

	Topic.prototype.like = function() {
		var topic = this;
		var url = '/restapi/vc/messages/id/' + topic.id + '/kudos/give';
		var xhr;
		if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.xhr"); }
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				topic.kudo.count += 1;
				topic.kudo.status = "kudoed";
				topic.kudo.refreshButton();
			}
		};
		xhr.open("POST",url,true);
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send();
	};

Henrik