Versions Compared

Old Version 5

changes.mady.by.user Selvavignesh Perumal

Saved on

compared with

New Version Current

changes.mady.by.user Debanraj Ravindran

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Introduction

In this 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 screenshot. UI→ Settings→ Advanced→ Custom Javascriptcode block and screenshot below:
    Code Block
    languagejs
    $(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 you us to reposition the pop-up by clicking and dragging it to your desired location. Refer to the attached screenshot.                                             Image RemovedTo customize the popup’s appearance, you can modify the styles as needed. Refer to the attached screenshot for guidance.our desired location, as demonstrated in the image below.
    Image Added                                                                                                                     Image Removed  

  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.
    Image Added

Code Block
languagejs
// 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

View file
nameAPP_kb_DX8_Popup_Drag&Resize-1.jwa
height250