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
_______________________________________________
users mailing list
[email protected]
http://lists.xwiki.org/mailman/listinfo/users
