Page History
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...
We will need some help from JavaScript to replace the ratings values with stars. This script needs to be place on the same page where you have your ConfiForms TableView
Here is how this can be done
| Code Block |
|---|
<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> |
Here is an example of a form with custom field of rating points replaced by star image.
So, we have a form with one radio button field which values are replaced with star image.
Raw strorage format of an example, which demonstrates this form with script
...
Overview
Content Tools