Page History
...
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. 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> |
...
Overview
Content Tools