You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 14 Next »

Introduction

This article demonstrates how to enhance Joget Userview popups by making them draggable and resizable. By injecting a simple script into the UI settings, users can interact with popups more freely, improving overall usability. Additionally, the appearance and behavior of these popups can be customized through CSS modifications. 

How does it work?

  1. To enable drag and resize functionality for pop-up windows.
  2. Navigate to UI > Settings > Advanced > Custom JavaScript add the following script to the UI settings as shown in the code block and screenshot below:
    $(document).ready(function() {
    function enhanceDialog() {
        var $dialog = $('.ui-dialog');
        
        if ($dialog.length > 0) {
    
            if ($dialog.find('.ui-dialog-drag-handle').length === 0) {
                //modify the drag icon according to your needs
                $dialog.find('.ui-dialog-titlebar').prepend('<span class="ui-dialog-drag-handle ui-icon ui-icon-grip-dotted-vertical" style="position: absolute; right: 20px; top: -10px;cursor: move;"></span>');
            }

            $dialog.draggable({
                handle: '.ui-dialog-drag-handle',
                containment: 'window'
            }).resizable({
                handles: 'all',
                minWidth: 400,
                minHeight: 300,
                resize: function(event, ui) {
                    var $iframe = $('#jqueryDialogFrame');
                    if ($iframe.length > 0) {
                        $iframe.height(ui.size.height - $('.ui-dialog-titlebar').outerHeight());
                    }
                }
            });

            // Update handles according to your needs
            $('<style>')
                .text(`
                    .ui-dialog .ui-dialog-drag-handle {
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                        margin-top: 2px;
                    }
                    .ui-dialog .ui-resizable-handle {
                        background: #f0f0f0;
                        border: 1px solid #ccc;
                    }
                    .ui-dialog .ui-resizable-se {
                        width: 12px;
                        height: 12px;
                        right: -5px;
                        bottom: -5px;
                    }
                    .ui-dialog .ui-resizable-e {
                        width: 8px;
                        right: -4px;
                    }
                    .ui-dialog .ui-resizable-s {
                        height: 8px;
                        bottom: -4px;
                    }
                `)
                .appendTo('head');
        }
    }

    enhanceDialog();

    $(document).on('dialogopen', '.ui-dialog', function() {
        enhanceDialog();
    });
});
  3. The drag icon allows us to reposition the pop-up by clicking and dragging it to our desired location, as demonstrated in the image below.                                                                                                                 

  4. To customize the pop-up’s appearance, edit the inline style attributes in line 9 applied to the .ui-dialog-drag-handle element, such as position, offset, or cursor style.

// To customize the popup appearance, modify the inline styles in the code below as needed
if ($dialog.find('.ui-dialog-drag-handle').length === 0) {
    // You can adjust the drag icon’s styling here
    $dialog.find('.ui-dialog-titlebar').prepend(
        '<span class="ui-dialog-drag-handle ui-icon ui-icon-grip-dotted-vertical" style="position: absolute; right: 20px; top: -10px; cursor: move;"></span>'
    );
}


Download Sample App

APP_kb_DX8_Popup_Drag&Resize.jwa


  • No labels