Jump to content

Admin modal in front end


Recommended Posts

This post is related to 

but is a different way of tackling the problem.

The idea is to use the JqueryUI.module in the front end to present a restricted access admin page in a modal (class pw-modal). However the JqueryUI module doesn't seem to work properly in the front end (I have it working in the back end OK). I'm guessing that this is because the front end page has not loaded all the .js that is needed (that would normally be loaded in the back end). My _main.php loads the following from the core at the moment:


Any ideas what else I need, or have I got hold of the wrong end of the stick?

Link to comment
Share on other sites


1 hour ago, bernhard said:

Am I the only one preferring panels a LOT over modals? ? 

Maybe, maybe not. If I could do an admin panel in the front end then I might be able to have an opinion ?


Link to comment
Share on other sites

9 hours ago, MarkE said:

But the iPad scrolling issue still persists

Actually this seems to be a problem with the admin theme generally - for example, the tree panel in the uikit theme does not scroll on an iPad either. So looks like a bug. 

Link to comment
Share on other sites

If you load an admin page in a modal or panel from the front-end then there's not really any special PW magic there - it's just an iframe. So you don't have to use a JqueryUI modal or panel just because the PW admin does - you can use any JS modal library that supports iframes. There are a bazillion out there so there's bound to be something that doesn't cause this scrolling issue you're describing.

BTW I can confirm the tree panel scrolling issue on iPad - please do report it.

  • Like 1
Link to comment
Share on other sites

@Robin S there are lots of modal libraries, but the only reliable that I've found for including admin pages (iframes, html content, videos etc) in a modal is http://fancyapps.com/fancybox/3/ (and maybe magnific popup).

What I've not found is a library that makes it easy to create panels just like the pw admin does. Where one can simply add class="pw-panel" and it loads in an iframe, sliding in from left or right, being resizable, hideable, reloadable etc...

  • Like 1
Link to comment
Share on other sites

26 minutes ago, Robin S said:

use any JS modal library that supports iframes

Parallel to the approach I described above, I have also tried uikit's modal with an embedded iframe. This works adequately (and fixes the iPad issue with uk-overflow-auto), but there are a couple of snags - no doubt due to my incompetence:

  1. I can't work out how to make the modal/iframe height match the height of the embedded admin page - I can set the iframe width to 100%, but have to set a "hard" pixel height of, say 800, which may then leave whitespace for a small page.
  2. Because the target page for the iframe can vary (a range of pages may be edited), multiple modals/iframes are created via a loop (with toggle ids keyed to page ids). These then take  about 15-20 seconds to load, which is not really acceptable. No doubt there is some clever way of avoiding this using jQuery, but I haven't worked it out yet.

I will try some of the other suggestions as well. I also tried using the FEEL module, but that has the iPad problem too - see 

As mentioned there, I am not able to debug an iPad because I don't have a Mac. Similarly, @bernhard, I have no idea how to do a screencast on an iPad, but I can report the bug with a text description.


Link to comment
Share on other sites

2 hours ago, webhoes said:

did you get this working without giving user page-edit rights?

Obviously the user needs page-edit rights for the page in question. My approach to this was to write a hook after User::hasPagePermission which only gives them page-edit / page-add permission for the specific pages to which they are allowed access (i.e. in my app, their own membership records). If they try and access any other pages (e.g. directly in a browser, assuming they know the page-id or name, as the page in fancybox has modal=1, so no menu), they get a "You don't have access to edit" message.

Link to comment
Share on other sites

The pageload is about 3 seconds, but the hook doesn't seem to affect it. Because fancybox loads almost instantly and displays a rotating wheel, I don't think the wait is a problem.

48 minutes ago, webhoes said:

Do you give the user temporarily page-edits upon granted request of that page?

The module checks page-editable before rendering. The hook then adds the permission.

Link to comment
Share on other sites

Interesting. Are you willing to share you module? I have not been able to get a secure setup myself.

The pageload in my case is my security setup. I check for referenced users from a parent page or parent parent page. This is really time consuming.

Link to comment
Share on other sites

The module can be found at https://github.com/MetaTunes/AdminInModal

Use at your own risk!

The hook is specific to my app, but I hope the following gives the general idea:

wire()->addHookAfter('User::hasPagePermission', function(HookEvent $event) {
    // Get the object the event occurred on, if needed
    $user = $event->object;

    // An 'after' hook can retrieve and/or modify the return value
    $return = $event->return;

    // Get values of arguments sent to hook (if needed)
    $permission = $event->arguments(0);
    $p = $event->arguments(1);

    /* Your code here, perhaps modifying the return value */
    // Is it a page we need to customise access for?
    $templates = ['Membership', 'Member', 'Profile', 'Subscription', 'Payment', 'MemberShop', 'Booking', 'NewsItem'];
    $permissions = ['page-edit', 'page-add'];
    if ($p and in_array($p->template, $templates) and $permission and in_array($permission, $permissions)) {
        // Get the member-user
        $currentUser = $this->users->getCurrentUser();
        if ($currentUser and $currentUser->isLoggedin()) {
            if ($currentUser->hasRole('member')) {
                $email = $currentUser->email;
                $memberPage = $this->pages->get("has_parent=/memberships/, template=Member, email=$email");
                if ($currentUser->memberOnly) $return = false; // Member-only users can only access pages as defined below
                if ($memberPage->id) {
                    $membershipPage = $memberPage->parent;
                    //... and a lot more like that ($profilePage etc.) ...
                    $editablePages = new PageArray();
                    $addablePages = new PageArray();
                    $editablePages = $editablePages->add($membershipPage)->add($profilePage)->add($siblings)->add($currentSub)->add($shops)->add($subsPaymentPages)->add($draftNewsPages)->add($bookingPages);
                    $addablePages = $addablePages->add($membershipPage)->add($memberPage);  // pages where creation of children is allowed
                    if ($editablePages->has($p) and $permission == 'page-edit') $return = true;
                    if ($addablePages->has($p) and $permission == 'page-add') $return = true;

    // Populate back return value, if you have modified it
    $event->return = $return;


  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...