Page 1 of 1

Sliders in Confluence Plugin

Posted: Fri Oct 18, 2013 2:06 am
by asitharodrigo
We are trialling Protoshare in Confluence, which is our corporate wiki software. It is a great product - however, one issue is that I can't seem to find a slider control in the Confluence product. This does seem to be available in the web version. Also, are we able to take designs from the web version to the Confluence version ?

Re: Sliders in Confluence Plugin

Posted: Mon Oct 21, 2013 10:06 am
by Nick Jennings
Hi,

Sliders are a special type of component that are not available in Confluence due to how it is coded. Other components that are not available due to their coding and functionality are the RIA components found in the Library and Navigation components. Sliders may be added to the plug-in in a future release, but it is not currently on the roadmap.

It is possible for you to copy and paste components between ProtoShare SaaS and ProtoShare Confluence designs. Just remember that Sliders, Navigation, and RIA components will not appear when you paste.

Re: Sliders in Confluence Plugin

Posted: Tue Oct 29, 2013 2:14 am
by asitharodrigo
Thanks for the prompt reply Nick. Unfortunately it may mean the end of our experiment with Protoshare for Confluence as the project that we are using as a template for the trial involves a design whose primary input method is the slider. We may return to look at Protoshare in the future if this situation changes as in many other ways it looks quite promising.

Re: Sliders in Confluence Plugin

Posted: Tue Oct 29, 2013 10:15 am
by Nick Jennings
Hi,

The slider components that are available on the SaaS version are not actual methods to input data and they are mainly used for display. You can still create a slider within the Confluence version which is similar using the Advanced HTML component. Using specific code, you can also change the value for a state which allows you to have interactivity with your design.

This is example code of what you can use in the Advanced HTML component:

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function updateState() {
                var i = document.getElementById("myRange").value;
                window.parent.site9.PageStateMgr.getState(StateID).setValue(i - 1);
            }
                
            window.parent.site9.PageStateMgr.getState(StateID).addListener(
                function( event ) {
                    document.getElementById("myRange").value = event.to + 1;
                }
            , this )
        </script>
        <style>
            body { text-align:center; }
        </style>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="range" id="myRange" min="1" max="10" value="1" onChange="updateState();">
    </body>
</html>
You will need to replace the "StateID" with the actual state id that is found in your design. You will also need to change the "max="10" to the maximum number of values you have for the state.