bernhard

I like the grey background, but I'd prefer a dark grey border instead of the green one. In your case when the checkbox is checked it looks as if the button gets smaller because you use the background color as border color. That's also a little worse for accessibility than a dark grey I think.

No, I've accidently overwritten this version. But the second version is not accessible via keyboard anyhow. Damn... and I did it again! Now the pen https://codepen.io/baumrock/pen/pGXWxO has no shadow any more. It's the same as the second version but with grey border on focus to see it both on checked and unchecked state. Does codepen not save different versions like jsfiddle does when saving??

I was talking about :focus, sorry https://codepen.io/baumrock/pen/bzPrLV Edit: First I liked the styling of your toggle a lot, but looking at it closer, the drop-shadow is out of the surrounding container which does not look great. I changed my pen and removed the box-shadow and increased the border width to 2px. Not saying that this version is better - was just playing around with it... What do you think about this one with box-shadow but no vertical offset? https://codepen.io/baumrock/pen/zeVErm Ok, making the border green on focus is pretty, but does not work, because you'll not see the focus-state on checked checkboxes! I changed it to make the background dark grey (green would be prettier but misleading): https://codepen.io/baumrock/pen/bzPrLV Not so bad IMHO. This version also has horizontal shadow and it has 2px border instead of 1px. Ok, another one https://codepen.io/baumrock/pen/pGXWxO

Maybe you could add some nice styling if the checkbox is active (for accessibility / keyboard navigation)?

This is how I'm doing it in my migrations module: https://github.com/BernhardBaumrock/RockMigrations/blob/master/RockMigrations.module.php#L254-L270

Hi Jeremy and welcome to the forum I know that feeling, coming from a terrible one Sounds like a lot of work And I know what I'm talking about: ProcessWire is great for building custom forms for whatever "datatype" you need (regular page edits) and for building relations between those pages. It is IMHO not so great for displaying this data in a user-friendly way. We have listers and we have MarkupAdminDataTable, but both are not ideal for a little more complex tabular data (and I guess that's what you'll need a lot for such a system). That's why I built RockFinder, RockGrid and recently also RockCharts (early stage, not released yet). All of them are not totally easy to use for non-devs. You'll also need to learn how to create custom admin pages, but that's easy And finally, you'll need to grasp the concept of hooks: https://processwire.com/blog/posts/new-ajax-driven-inputs-conditional-hooks-template-family-settings-and-more/#new-conditional-hooks To make everything maintainable (and maybe also reusable), you'll need to pack everything in a module: https://processwire.com/docs/modules/ Good luck and have fun

Hey @Robin S , just found a problem when using this technique for handling shopping cart content: The user can select products (choose colours in your module) and those colors are stored in the users session. But when the user visits a different page, the user gets logged out and therefore loses all his session data (including the cart products, here colours). Another problem would be ProCache as it would not be usable when users are logged in Happy to hear your thoughts.

This looks really promising! What do you think? I'm using this library: https://github.com/davidjbradshaw/iframe-resizer It's as simple as adding your iframe to your frontend: <style>iframe{width: 1px;min-width: 100%;}</style> <iframe id="myIframe" src="/your-public-backend-page/" scrolling="no"></iframe> <script>iFrameResize({ log:true, bodyMargin: '0 0 30px 0', }, '#myIframe')</script> Further improvements could be to sync the page url with the iframe url, but the great thing is: We'd only have to do this once and could use it on all our projects. No matter what frontend we are using! Imagine what a powerful tool this could be: Creating forms, registration pages, carts, event signup pages etc etc., everything as modular and reusable as we know it from the pw backend. And everything instantly styleable via RockSkinUikit

Thx Robin, this is (almost) awesome! I forked your repo and did two minor changes: I implemented a hookable method to modify the HTML, here to remove the admin url that is exposed in the pw config js object: https://github.com/BernhardBaumrock/ProcessFrontendAdminPage/commit/1fed071d3f951b82fbae6c98b2c4834efec2b6bd I removed the $session->redirect in the processmodule. I guess the reason why you did that was to get rid of the ?modal=1 parameter in the url? The parameter is appended in InputfieldForm when ?modal=1, so I reset this parameter on initialisation of the process: https://github.com/BernhardBaumrock/ProcessFrontendAdminPage/commit/d19f71c03b7169734dca243bc45f35a205782bf3 Do you know how/if we could throw a regular 404 on a Unrecognized path exception in the backend? Thank you very much for your work on this!

You could try https://electronjs.org/ - I haven't tried it yet but I guess this should be quite simple to learn/use for a webdev

Hey guys, I played around with this idea a little more, because I have 3 projects where I need similar functionality and I really don't want to build all that functionality over and over again for every single project (and all future ones). I created a short screencast that shows how it works. The concept is to hook into ProcessLogin::execute, because this method is what every guest user will see regardless of what admin page he requested: $wire->addHookAfter("ProcessLogin::execute", function(HookEvent $e) { $requestedPage = $this->session->getFor('ProcessPageView', 'loginRequestPageID'); $process = $this->pages->get($requestedPage)->process; $segment = $this->input->urlSegment1; $method = 'execute' . ucfirst($segment); // debug info if(function_exists('bd')) { bd($requestedPage, 'requestedPage'); bd($process, 'process'); bd($segment, 'url segment'); bd($method, 'method'); } // prevent infinite loop if($process == 'ProcessLogin') return; // prevent warning on loginpage without /login urlsegment if($process == 'ProcessPageList') return; try { $e->return = $this->modules->get($process)->{$method}(); } catch (\Exception $e) { $this->error($e->getMessage()); } }); ProcessGuest.module is a simple module that shows that this concept actually works pretty well: <?php namespace ProcessWire; class ProcessGuest extends Process { public static function getModuleInfo() { return array( 'title' => 'GuestAdmin', 'summary' => 'GuestAdmin to ProcessWire', 'version' => 106, 'permission' => 'page-view', 'page' => [ 'name' => 'guest', 'title' => 'Public Guest Page', ], ); } public function execute() { $this->headline('execute()'); $this->wire('processBrowserTitle', 'execute()'); $form = $this->modules->get('InputfieldForm'); // create fieldset $fs = $this->modules->get('InputfieldFieldset'); $fs->label = 'This is a public backend page demo'; // add status inputfield $f = $this->fields->get('title')->getInputfield(new NullPage()); $f->label = 'foo'; $f->columnWidth = 30; $fs->add($f); // add button field $b = $this->modules->get('InputfieldButton'); $b->value = 'Demo button'; $b->icon = 'bolt'; $f = $this->modules->get('InputfieldMarkup'); $f->columnWidth = 70; $f->value = 'Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Duis leo. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Sed aliquam ultrices mauris. Vivamus euismod mauris.<br><br>'; $f->value .= $b->render(); $fs->add($f); $form->add($fs); $form->add([ 'submit' => [ 'type' => 'submit', 'value' => 'submit', ], ]); return $form->render(); } public function executeFoo() { $this->wire('processBrowserTitle', 'executeFoo()'); $this->config->scripts->add('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js'); return 'foo <div id="moment"></div><script>$("#moment").text(moment().format());</script>'; } } See it in action (and notice that the user is NOT logged in): Of course, this is a dirty hack, but it seems to work quite well and it might be good enough for a first proof of concept implementation to get ryans attention about it. What do you think? Unsolved problems so far where I could neet your input: Everything is centered - where does this styling come from? I know that the login-form get's centered, but I didn't find the exact class/script that is responsible for it so I couldn't remove it. Any ideas how we could use a similar technique but with a custom admin url so that we could mask the original admin url of the backend? Maybe hooking into a 404 exception? Or creating a custom frontend page? But how could one render an admin page then? $this->headline() does not work, so there might be other things not working with this technique...

Great!! Thank you very much, will try it soon

Hi Adrian, just tried your suggested method on another website where I only have guest + superuser. It does not work as expected, or I'm missing something. When I start a user switcher session and logout, I get the debug bar, but I still cannot open the console. So it is not possible on that site to do some quick console tests and dumps... This would be really helpful on that setup. Or is there another hidden way how I could use the console as guest user? Would be great to have the guest user available in the switcher! Thx

Why don't you just render a submit button in your field? When sending is ON you could just display the emergency-stop-button. When sending is OFF you could disable something like a continue-sending-button. Don't know how your module works regarding the starting of a sending process... Is it done via AJAX or via a regular form submit? You checkbox toggle looks nice though. Many roads as always

ProcessWire does not dictate which Framework you use on the frontend. The blog profile is just an example, and in this example Uikit is used. You could though, also use any other framework. Or none. That's up to you. Have a look at the blank profile. Do the Hello World Tutorial again and then add your three.js library there. While I guess that nothing really changed since when you did it the first time, your brain might be happy to get a refresher Putting Code into Textarea fields is possible, but I'd not recommend it unless you are advanced and really know what you are doing.