Creating form with star based ratings table view

This is the documentation for ConfiForms Server/Data Center app

However, this might also work for ConfiForms cloud and in most cases it does. But please see this page to understand the differences between server and cloud versions of the ConfiForms app.

With ConfiForms you have endless possibilities on how you can create your forms or how to present the data captured with you forms. This page touches the basics - Multiple ways to show your form data in Confluence with ConfiForms

Here we wanted to show you how you can extend this and do something cool by showing the "stars" instead of boring ratings values for your data

Consider having a form like this

Just one field to capture and that is "rating" field. We use Radio Group as it's type and it has the following values

So, we put a standard TableView on the page to show the ratings value. And instead of showing something like this

We want this

Here is an example of a form with custom field of rating points replaced by star image.

We will need some help from JavaScript to replace the ratings values with stars

Here is how this can be done

<script type="text/javascript">
function getValFromClass(cfClassName) {
	var ind = cfClassName.indexOf("-",1);
	if (ind > 0) {
		cfValue = cfClassName.slice(ind+1, cfClassName.length);
	}
	return cfValue;
}

function getStarHtml(cfValue) {
	var starHtml = "";
	for (var ind = 0; ind < cfValue; ind++) {
		starHtml = starHtml + AJS.$("#mystardiv").html();
	}
	return starHtml;
}

function setStarHtml(cfClassName) {
	if (typeof cfClassName !== typeof undefined && cfClassName !== false) {
		cfValue = getValFromClass(cfClassName);
		var star = "";
		star = getStarHtml(cfValue);
		selector = "span[class='" + cfClassName + "']";
		AJS.$(selector).html(star);
	}
}

function setRatingImg(cfName) {
	var spanSelector = "span[cf-field='" + cfName + "']";
	AJS.$(spanSelector).each(function(){
		setStarHtml(AJS.$(this).attr('class'))
  	});	
}

AJS.toInit(function() {
	// replace the "rating" field
  	setRatingImg('rating');
});
</script>

// hidden place for the star image
<div id="mystardiv" style="display:none">
<img id="mystar" alt="1 point" title="1 point" style="" data-choice="1" width="20px" src="data:image/svg+xml;utf8;base64,PHN2Zw0KICAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIg0KICAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyINCiAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogICAgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyINCiAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iDQogICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIg0KICAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogICAgeG1sbnM6bnMxPSJodHRwOi8vc296aS5iYWllcm91Z2UuZnIiDQogICAgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQogICAgaWQ9InN2ZzMwMTkiDQogICAgc29kaXBvZGk6ZG9jbmFtZT0iTmV3IGRvY3VtZW50IDIiDQogICAgdmlld0JveD0iMCAwIDE5NC4yMiAxODQuNzMiDQogICAgdmVyc2lvbj0iMS4xIg0KICAgIGlua3NjYXBlOnZlcnNpb249IjAuNDguMCByOTY1NCINCiAgPg0KICA8c29kaXBvZGk6bmFtZWR2aWV3DQogICAgICBpZD0iYmFzZSINCiAgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2Ig0KICAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiINCiAgICAgIGlua3NjYXBlOndpbmRvdy15PSIzMTQiDQogICAgICBmaXQtbWFyZ2luLWxlZnQ9IjAiDQogICAgICBwYWdlY29sb3I9IiNmZmZmZmYiDQogICAgICBmaXQtbWFyZ2luLXRvcD0iMCINCiAgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiDQogICAgICBpbmtzY2FwZTp6b29tPSIwLjM1Ig0KICAgICAgaW5rc2NhcGU6d2luZG93LXg9IjQ5OCINCiAgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjQ4MCINCiAgICAgIHNob3dncmlkPSJmYWxzZSINCiAgICAgIGJvcmRlcm9wYWNpdHk9IjEuMCINCiAgICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9ImxheWVyMSINCiAgICAgIGlua3NjYXBlOmN4PSIxMTIuMTEwNDYiDQogICAgICBpbmtzY2FwZTpjeT0iMTE1LjIyMDY3Ig0KICAgICAgZml0LW1hcmdpbi1yaWdodD0iMCINCiAgICAgIGZpdC1tYXJnaW4tYm90dG9tPSIwIg0KICAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSI0ODMiDQogICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMC4wIg0KICAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtdW5pdHM9InB4Ig0KICAvPg0KICA8Zw0KICAgICAgaWQ9ImxheWVyMSINCiAgICAgIGlua3NjYXBlOmxhYmVsPSJMYXllciAxIg0KICAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciINCiAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNjIuODkgLTQ2Mi44NikiDQogICAgPg0KICAgIDxnDQogICAgICAgIGlkPSJnMzg2NyINCiAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMTc1IDcxLjg5NikiDQogICAgICA+DQogICAgICA8cGF0aA0KICAgICAgICAgIGlkPSJwYXRoMjk4NSINCiAgICAgICAgICBzb2RpcG9kaTpyMj0iMjMuMDgyMDQxIg0KICAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmNjMDAiDQogICAgICAgICAgc29kaXBvZGk6dHlwZT0ic3RhciINCiAgICAgICAgICBkPSJtMzY5LjIxIDUzNS42Ny0yNy4zNzgtMTMuNzkyLTI2Ljg4MyAxNC43MzUgNC42NTY2LTMwLjMtMjIuMzIxLTIxLjAxNCAzMC4yNTYtNC45MzQ2IDEzLjA4OC0yNy43MjIgMTQuMDQzIDI3LjI1MSAzMC40MDkgMy44ODA2LTIxLjU3NyAyMS43NzZ6Ig0KICAgICAgICAgIHNvZGlwb2RpOnIxPSI0Ni4xNjQwODIiDQogICAgICAgICAgaW5rc2NhcGU6dHJhbnNmb3JtLWNlbnRlci14PSItMC4wMDYzMDUxOTMyIg0KICAgICAgICAgIGlua3NjYXBlOnRyYW5zZm9ybS1jZW50ZXIteT0iLTkuNzQ0NDUyOCINCiAgICAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgyLjIxMTUgLjAzODg2MSAtLjAzODg2MSAyLjIxMTUgLTM4NS44OCAtNjIzLjMpIg0KICAgICAgICAgIHNvZGlwb2RpOmFyZzI9IjEuNTUzNDI1NiINCiAgICAgICAgICBzb2RpcG9kaTphcmcxPSIwLjkyNTEwNzA0Ig0KICAgICAgICAgIGlua3NjYXBlOnJhbmRvbWl6ZWQ9IjAiDQogICAgICAgICAgc29kaXBvZGk6Y3k9IjQ5OC43OTg1OCINCiAgICAgICAgICBzb2RpcG9kaTpjeD0iMzQxLjQzMTU1Ig0KICAgICAgICAgIGlua3NjYXBlOnJvdW5kZWQ9IjAiDQogICAgICAgICAgaW5rc2NhcGU6ZmxhdHNpZGVkPSJmYWxzZSINCiAgICAgICAgICBzb2RpcG9kaTpzaWRlcz0iNSINCiAgICAgIC8+DQogICAgICA8cGF0aA0KICAgICAgICAgIGlkPSJwYXRoMzgzNiINCiAgICAgICAgICBzb2RpcG9kaTpub2RldHlwZXM9ImNjY2MiDQogICAgICAgICAgZD0ibTM4MC4wMyA0NTEuMzhjLTMwLjM5IDQxLjM2OS0zMC43MiA0MS44MTktMzAuNzIgNDEuODE5bDk3LjQxMS0zMS44OTl6Ig0KICAgICAgICAgIGlua3NjYXBlOnRyYW5zZm9ybS1jZW50ZXIteD0iLTQ4LjcwNTY2Ig0KICAgICAgICAgIGlua3NjYXBlOnRyYW5zZm9ybS1jZW50ZXIteT0iLTIwLjkwOTI5MyINCiAgICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIg0KICAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmU2ODAiDQogICAgICAvPg0KICAgICAgPHBhdGgNCiAgICAgICAgICBpZD0icGF0aDM4MzgiDQogICAgICAgICAgZD0ibTM0OS44MSA0OTIuMzF2NTEuOTQybC02MC42MyAzMS4xMTd6Ig0KICAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmRkNTUiDQogICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCINCiAgICAgIC8+DQogICAgICA8cGF0aA0KICAgICAgICAgIGlkPSJwYXRoMzg0MCINCiAgICAgICAgICBkPSJtMzQ5LjgxIDQ5Mi4zMSA1OS42MTMgODEuNDc2LTExLjE4OS02NS45ODR6Ig0KICAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmRkNTUiDQogICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCINCiAgICAgIC8+DQogICAgICA8cGF0aA0KICAgICAgICAgIGlkPSJwYXRoMzg0MiINCiAgICAgICAgICBkPSJtMjUzLjEgNDYxLjM3IDk2LjcxNSAzMC45NDItMjkuODgyLTQwLjg0MnoiDQogICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZTY4MCINCiAgICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIg0KICAgICAgLz4NCiAgICAgIDxwYXRoDQogICAgICAgICAgaWQ9InBhdGgzODQ0Ig0KICAgICAgICAgIGQ9Im0zNDkuODEgNDkyLjMxdi0xMDEuMjJsMjkuODMgNjAuMzU3eiINCiAgICAgICAgICBzdHlsZT0iZmlsbDojZmZkZDU1Ig0KICAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiDQogICAgICAvPg0KICAgICAgPHBhdGgNCiAgICAgICAgICBpZD0icGF0aDM4NDYiDQogICAgICAgICAgZD0ibTI4OS44IDU3NC41MyAxMS4yNjEtNjYuNTQxIDQ4Ljc1Ny0xNS42Nzl6Ig0KICAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmQ0MmEiDQogICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCINCiAgICAgIC8+DQogICAgPC9nDQogICAgPg0KICA8L2cNCiAgPg0KICA8bWV0YWRhdGENCiAgICA+DQogICAgPHJkZjpSREYNCiAgICAgID4NCiAgICAgIDxjYzpXb3JrDQogICAgICAgID4NCiAgICAgICAgPGRjOmZvcm1hdA0KICAgICAgICAgID5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQNCiAgICAgICAgPg0KICAgICAgICA8ZGM6dHlwZQ0KICAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSINCiAgICAgICAgLz4NCiAgICAgICAgPGNjOmxpY2Vuc2UNCiAgICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbGljZW5zZXMvcHVibGljZG9tYWluLyINCiAgICAgICAgLz4NCiAgICAgICAgPGRjOnB1Ymxpc2hlcg0KICAgICAgICAgID4NCiAgICAgICAgICA8Y2M6QWdlbnQNCiAgICAgICAgICAgICAgcmRmOmFib3V0PSJodHRwOi8vb3BlbmNsaXBhcnQub3JnLyINCiAgICAgICAgICAgID4NCiAgICAgICAgICAgIDxkYzp0aXRsZQ0KICAgICAgICAgICAgICA+T3BlbmNsaXBhcnQ8L2RjOnRpdGxlDQogICAgICAgICAgICA+DQogICAgICAgICAgPC9jYzpBZ2VudA0KICAgICAgICAgID4NCiAgICAgICAgPC9kYzpwdWJsaXNoZXINCiAgICAgICAgPg0KICAgICAgICA8ZGM6dGl0bGUNCiAgICAgICAgICA+U3RhcjwvZGM6dGl0bGUNCiAgICAgICAgPg0KICAgICAgICA8ZGM6ZGF0ZQ0KICAgICAgICAgID4yMDEwLTExLTEzVDIwOjE3OjU1PC9kYzpkYXRlDQogICAgICAgID4NCiAgICAgICAgPGRjOmRlc2NyaXB0aW9uDQogICAgICAgICAgPkEgc3RhciB3aXRoIHNpbXBsZSBzaGFkb3dpbmc8L2RjOmRlc2NyaXB0aW9uDQogICAgICAgID4NCiAgICAgICAgPGRjOnNvdXJjZQ0KICAgICAgICAgID5odHRwczovL29wZW5jbGlwYXJ0Lm9yZy9kZXRhaWwvOTU0MzEvc3Rhci1ieS1hcnRva2VtPC9kYzpzb3VyY2UNCiAgICAgICAgPg0KICAgICAgICA8ZGM6Y3JlYXRvcg0KICAgICAgICAgID4NCiAgICAgICAgICA8Y2M6QWdlbnQNCiAgICAgICAgICAgID4NCiAgICAgICAgICAgIDxkYzp0aXRsZQ0KICAgICAgICAgICAgICA+YXJ0b2tlbTwvZGM6dGl0bGUNCiAgICAgICAgICAgID4NCiAgICAgICAgICA8L2NjOkFnZW50DQogICAgICAgICAgPg0KICAgICAgICA8L2RjOmNyZWF0b3INCiAgICAgICAgPg0KICAgICAgICA8ZGM6c3ViamVjdA0KICAgICAgICAgID4NCiAgICAgICAgICA8cmRmOkJhZw0KICAgICAgICAgICAgPg0KICAgICAgICAgICAgPHJkZjpsaQ0KICAgICAgICAgICAgICA+c3RhcjwvcmRmOmxpDQogICAgICAgICAgICA+DQogICAgICAgICAgPC9yZGY6QmFnDQogICAgICAgICAgPg0KICAgICAgICA8L2RjOnN1YmplY3QNCiAgICAgICAgPg0KICAgICAgPC9jYzpXb3JrDQogICAgICA+DQogICAgICA8Y2M6TGljZW5zZQ0KICAgICAgICAgIHJkZjphYm91dD0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbGljZW5zZXMvcHVibGljZG9tYWluLyINCiAgICAgICAgPg0KICAgICAgICA8Y2M6cGVybWl0cw0KICAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyNSZXByb2R1Y3Rpb24iDQogICAgICAgIC8+DQogICAgICAgIDxjYzpwZXJtaXRzDQogICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zI0Rpc3RyaWJ1dGlvbiINCiAgICAgICAgLz4NCiAgICAgICAgPGNjOnBlcm1pdHMNCiAgICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjRGVyaXZhdGl2ZVdvcmtzIg0KICAgICAgICAvPg0KICAgICAgPC9jYzpMaWNlbnNlDQogICAgICA+DQogICAgPC9yZGY6UkRGDQogICAgPg0KICA8L21ldGFkYXRhDQogID4NCjwvc3ZnDQo+DQo=">
</div>

Space shortcuts

Child pages