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 <gerritjankoekk...@gmail.com> 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 > <mariusdumitru.flo...@xwiki.com> het volgende geschreven: > >> On Tue, Jun 17, 2014 at 2:00 PM, Gerritjan Koekkoek >> <gerritjankoekk...@gmail.com> wrote: >>> Hi >>> Op 17 jun. 2014, om 07:59 heeft Marius Dumitru Florea >>> <mariusdumitru.flo...@xwiki.com> het volgende geschreven: >>> >>>> On Mon, Jun 16, 2014 at 4:53 PM, Gerritjan Koekkoek >>>> <gerritjankoekk...@gmail.com> 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 >>>>> <mariusdumitru.flo...@xwiki.com> 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 >>>>>> <gerritjankoekk...@gmail.com> 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 >>>>>>> users@xwiki.org >>>>>>> http://lists.xwiki.org/mailman/listinfo/users >>>>>> _______________________________________________ >>>>>> users mailing list >>>>>> users@xwiki.org >>>>>> http://lists.xwiki.org/mailman/listinfo/users >>>>> >>>>> _______________________________________________ >>>>> users mailing list >>>>> users@xwiki.org >>>>> http://lists.xwiki.org/mailman/listinfo/users >>>> _______________________________________________ >>>> users mailing list >>>> users@xwiki.org >>>> http://lists.xwiki.org/mailman/listinfo/users >>> >>> _______________________________________________ >>> users mailing list >>> users@xwiki.org >>> http://lists.xwiki.org/mailman/listinfo/users >> _______________________________________________ >> users mailing list >> users@xwiki.org >> http://lists.xwiki.org/mailman/listinfo/users > > _______________________________________________ > users mailing list > users@xwiki.org > http://lists.xwiki.org/mailman/listinfo/users _______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users