[Silk UI Web] Support for disabled ToggleButton

[Silk UI Web] Support for disabled ToggleButton

  
Forge Component
(63)
Published on 14 Jun (6 days ago) by OutSystems Labs
63 votes
Published on 14 Jun (6 days ago) by OutSystems Labs
Looks like it doesnt honor the disabled attribute.

I added an if statement around the change handler to solve. Is there any reason why this shouldnt be part of the base?

New code highlighted (from ToggleScript):

function toggleButton(){
    var that = this;
    
    function onChange() {
        $(this).closest('label').toggleClass('changed');
        $(this).closest('label').parent().toggleClass('changed');
    }
    
    function onFocus() {
        /* set focus */
       /* $(this).closest('label').parent().css("outline-color", "#336600");*/
    }
    
    function onFocusOut() {
        $(this).closest('label').parent().css("outline-color", "transparent");
    }
    
    function initToggle() {
        $('.ToggleButton_label:not(.toggled) input').each(function(){
            if ($(this).is(':checked')) {
                $(this).closest('label').addClass('changed');
                $(this).closest('label').parent().addClass('changed');
            }
            
            $(this).closest('.ToggleButton_label').addClass('toggled');
            
            /* honor diabled attribute */
            if( !$(this).is(":disabled") ) {
                        $(this).on("change", onChange);
            }
 
            $(this).on("focus", onFocus);
            $(this).on("focusout", onFocusOut);
        });
    };
    
    osAjaxBackend.BindAfterAjaxRequest(initToggle);
    initToggle();
};
 
 
$(document).ready(toggleButton);
Hello Robert,

So far I wasn't able to replicate your issue.
When I use a disabled checkbox inside a toggleButton, the toggleButton is not selectable.

Can you provided us an example of  your implementation (screenshot or even a clean eSpace with the issue replicated)?

Best regards,
Samuel Jesus

The toggle button, why it says its only for mobile devices? Doesnt it work with some browsers on desktop?

Hello Sergey,

I'm not sure where you have read that information, but the pattern description states the following:

"A mobile friendly pattern to switch between two states. (...)"

With this, we wanted to state that the pattern works really well in mobile devices, especially because it is a pattern that users usually see in mobile devices.

However, do not worry: the pattern does work on desktop browsers too. You can test the pattern working on a desktop on the Silk UI Website.


Cheers,

Samuel Jesus

Thank you Jesus,


Look up here: https://success.outsystems.com/Documentation/10/Developing_an_Application/Design_UI/Inputs/Switch_or_Toggle_a_Boolean_Value


To gather end-user input for a boolean value in a form, OutSystems provides two types of widgets:

 Check Box

 Switch (for Mobile Apps only).

To use these widgets, do the following:

  1. Drag the Check Box or Switch widget from the toolbar into the Form;
  2. Bind the boolean variable to the widget in the Variable property

Hi Sergey,

You are absolutely right and thank you so much for finding this "issue" in the document. We will review that specific documentation.

Nevertheless, my answer is valid: you can use the pattern ToggleButton from Silk UI Web in desktop browsers.

Cheers,

Samuel Jesus