Hello, I’ve made it… I’ve defined a class by AppWithinMinutes with a numeric property (of type INTEGER) In Custom Display field: {{include document="tryControls.rangeValueSheet" /}} {{velocity}} #set($range= [5,4,3,2,1]) #displayRange($range) {{/velocity}} Important to make sure once the xForm is saved is to use the right naming conventions for the radio button's In the sheet that is included the following code: {velocity}} #set($discard = $xwiki.ssx.use("tryControls.rangeValueSheet")) #macro(displayRange $range) {{html clean=false}} #if($value) <fieldset> <span class="rating"> #set($field = $object.getxWikiClass().get($name)) #set($controlName = $prefix + $name) #foreach($rangeValue in $range) #set( $countString = $rangeValue - 1 ) #set($controlID= "xwiki-form-" + $name + "-0-" + $countString) #if($type == 'edit') ## In EDIT mode the user selection can be changed #if($value == $rangeValue) <input type="radio" id="$controlID" name="$controlName" value="$rangeValue" checked="checked"/> #else <input type="radio" id="$controlID" name="$controlName" value="$rangeValue" /> #end #else ## In VIEW mode the user selection can not be changed ## set control disabled #if($value == $rangeValue) <input type="radio" id="$controlID" name="$controlName" value="$rangeValue" disabled checked="checked"/> #else <input type="radio" id="$controlID" name="$controlName" value="$rangeValue" disabled/> #end #end <label for="$controlID">$rangeValue</label> #end </span> </fieldset> #else No Value known, macro not used in context of a class value #end {{/html}} #end {{/velocity}} Please review my naming… Op 26 jun. 2014, om 10:44 heeft Gerritjan Koekkoek <[email protected]> het volgende geschreven:
Hi, Thanks a lot Marius, i’ve made a lot of progress… I now have a ‘Star rating’ based on a numeric field, type integer, min-value 1 max value of 5 In the custom display I have the following code: {{velocity}} #set($discard = $xwiki.ssx.use("tryControls.rangeValueSheet")) {{html clean=false}} <fieldset> <legend>Score</legend> <span class="rating"> #if($type == 'edit') #set($discard = $xwiki.jsfx.use("tryControls.rangeValueSheet")) #if($value == 5) <input type="radio" id="rating-5" name="rating" value="5" checked="checked" /> #else <input type="radio" id="rating-5" name="rating" value="5" /> #end <label for="rating-5">5</label> #if($value == 4) <input type="radio" id="rating-4" name="rating" value="4" checked="checked" /> #else <input type="radio" id="rating-4" name="rating" value="4" /> #end <label for="rating-4">4</label> #if($value == 3) <input type="radio" id="rating-3" name="rating" value="3" checked="checked"/> #else <input type="radio" id="rating-3" name="rating" value="3" /> #end <label for="rating-3">3</label> #if($value == 2) <input type="radio" id="rating-2" name="rating" value="2" checked="checked"/> #else <input type="radio" id="rating-2" name="rating" value="2" /> #end <label for="rating-2">2</label> #if($value == 1) <input type="radio" id="rating-1" name="rating" value="1" checked="checked"/> #else <input type="radio" id="rating-1" name="rating" value="1" /> #end <label for="rating-1">1</label> #else #if($value == 5) <input type="radio" id="rating-5" name="rating" value="5" disabled checked="checked" /> #else <input type="radio" id="rating-5" name="rating" value="5" disabled/> #end <label for="rating-5">5</label> #if($value == 4) <input type="radio" id="rating-4" name="rating" value="4" disabled checked="checked" /> #else <input type="radio" id="rating-4" name="rating" value="4" disabled/> #end <label for="rating-4">4</label> #if($value == 3) <input type="radio" id="rating-3" name="rating" value="3" disabled checked="checked"/> #else <input type="radio" id="rating-3" name="rating" value="3" disabled/> #end <label for="rating-3">3</label> #if($value == 2) <input type="radio" id="rating-2" name="rating" value="2" disabled checked="checked"/> #else <input type="radio" id="rating-2" name="rating" value="2" disabled/> #end <label for="rating-2">2</label> #if($value == 1) <input type="radio" id="rating-1" name="rating" value="1" disabled checked="checked"/> #else <input type="radio" id="rating-1" name="rating" value="1" disabled/> #end <label for="rating-1">1</label> #end </span> </fieldset> {{/html}} {{/velocity}}
I feel the code can be ‘shortened’ significantly? Suggestions on how?
As you could see numeric value is displayed by radio button’s So if $value = 3 the third button is Checked.
To make it look like a star rating I added a CSS extension sheet: (from http://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/) .rating { float:left; }
/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t follow these rules. Every browser that supports :checked also supports :not(), so it doesn’t make the test unnecessarily selective */ .rating:not(:checked) > input { position:absolute; top:-9999px; clip:rect(0,0,0,0); }
.rating:not(:checked) > label { float:right; width:1em; padding:0 .1em; overflow:hidden; white-space:nowrap; cursor:pointer; font-size:200%; line-height:1.2; color:#ddd; text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5); }
.rating:not(:checked) > label:before { content: '★ '; }
.rating > input:checked ~ label { color: #f70; text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5); }
.rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { color: gold; text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5); }
.rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label { color: #ea0; text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5); }
.rating > label:active { position:relative; top:2px; left:2px; }
But my remaining problem is to SAVE the selected number? I have a record with a value of 4, so a 4-star rating is selected and displayed perfectly. If I select INLINE EDIT i’m able to SELECT 2 STARS (or any other), but as soon as I SAVE the 4 star rating is still there. How is this best done?
Op 19 jun. 2014, om 09:24 heeft Marius Dumitru Florea <[email protected]> het volgende geschreven:
On Tue, Jun 17, 2014 at 2:00 PM, Gerritjan Koekkoek <[email protected]> wrote:
Hi Op 17 jun. 2014, om 07:59 heeft Marius Dumitru Florea <[email protected]> het volgende geschreven:
On Mon, Jun 16, 2014 at 4:53 PM, Gerritjan Koekkoek <[email protected]> wrote:
Hi, Yes, this surely helps but i fail to get it work as I hope it can. I have generated a app with App Within Minutes.
In the sheet there is a construct like this: {{velocity}} {{html wiki="true"}} #set ($discard = $doc.use('TestStarRating.TestStarRatingClass')) #set ($discard = $services.localization.use('document', 'TestStarRating.TestStarRatingTranslations')) (% class="xform" %) ((( ; <label for="TestStarRating.TestStarRatingClass_0_Rating">$escapetool.xml($doc.displayPrettyName('Rating', false, false))</label> : $doc.display('Rating') ))) {{/html}} {{/velocity}}
:$doc.display(‘Rating’) is ‘smart’ as it knows when in ‘View’ and ‘Edit’ mode.
If I would go to the class and modify Custom Display
How can I keep the ‘smartness’ of $doc.display?
Have you really looked at the code of the existing custom displayers found on extensions.xwiki.org ? i.e. did you download the source XAR and imported it in your wiki to check the code? It doesn't seem so, because you would have seen something like:
#if ($type == 'edit’) Yes, have looked at it and this is what puzzles me… In the generated sheet code from app-within minutes there is no notion of this… I think basically my question is:
If I keep $doc.display(‘rating’) in the sheet And build a IF then else for different behavior in View and Edit mode…will this work?
If it works for the custom displayers published on extensions.xwiki.org then it should work for you too. Have you tried to use one of them? You don't have to do anything in the sheet except calling $doc.display('propertyThatHasACustomDisplayer') . There are a couple of Velocity variables available to the code of the custom displayer. $type is one of them. Check the code of existing custom displayers for the rest (if you don't see any #set for a variable then it means it's predefined).
Or do I need to replace in the sheet $doc.display(‘rating’) with something else. In the sheet I know I can get the ‘old’ value (if any) and display it since I have the context of $doc In the Class i’m not knowing to what context variable I should refer to present the old value?
Does my question/struggle make sense?
I have the feeling that a velocity script in the custom display does not have notion of $doc? Or can I use this context variable?
The important change I want to achieve is change the ‘radio button’ behavior’ in a star-rating behavior. Important is that this should stay visible in Read-mode as the numeric result 3 is less informative as seeing three stars.
I’m inspired by this code: http://codepen.io/lsirivong/pen/ekBxI
It uses CSS to style radiobuttons as star rating (and a small javascript) But it requires radiobuttons to stay visible in view mode…
Op 10 jun. 2014, om 14:33 heeft Marius Dumitru Florea <[email protected]> het volgende geschreven:
I don't think there is a documentation unfortunately, but there are 3 examples on http://extensions.xwiki.org/xwiki/bin/view/Main/WebHome#|t=extensions&p=1&l=30&s=doc.creationDate&d=desc&name=custom+display .
Hope this helps, Marius
On Thu, Jun 5, 2014 at 11:06 AM, Gerritjan Koekkoek <[email protected]> wrote: > Hi > > We are trying to develop questionnaires within xwiki. > In order to get clear answers from people we prefer static lists above text > fields which would be more difficult to analyze. > > As a approach we start with appWithinMinutes and add attributes of type > static list > > Use case 1: > When we want the user to select one of a limited set of options we typical > use radio button as input control. > > In edit mode this works fine. > But in collaborative mode this does not work very well for us. > What we mean by collaborative mode? > We have patients discussing the questionnaire with the expert. > Over the internet they both look at the page which holds the questionnaire > already completed by the patient... > But since default XWiki is showing only the value selected discussions > about why the patient chose the one option above the other are too > difficult. > We would like the radiobuttons view in edit mode, but disabled for > modification; especially since in view mode changing the elected option... > > Would it be possible to modify the class and add something in the "Custom > Display"? > Is there a useful document on how the custom display option for classes > works? > > Use case 2: > Some questions are of the type "How much would you agree" > Then the user can select between totally disagree, somewhat disagree, > neutral, somewhat agree totally agree. > We have now selected a static list with 5 options labeled as above... > But on the internet we often see sliders that can be put in 5 positions > (from left to right or from top to bottom) > > Would it be possible to use such sliders via Custom Display. As a base > attribute we would then probably switch from static list to a numeric field > holding the value of the slider. > Same as in use case 1; can we also show the slider disabled in > 'collaborative mode' > > Many thanks for suggestions or links to documents that describe the 'custom > display' > > Gerritjan > _______________________________________________ > users mailing list > [email protected] > http://lists.xwiki.org/mailman/listinfo/users _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users