bernhard

very nice in the second example: where does the content come from? a regular page that is linked? what kind of panel is this? is there a reason why you use an uikit panel instead of the built in pw-panel?

ok didn't know there is a difference. if you do not do already i recommend using adrians awesome tracy debugger module. then you see that inside a repeader the field has a different name: $wire->addHookBefore('Inputfield::render', function(HookEvent $event) { $field = $event->object; bd($field->name); }); hope that helps and you find your solution on your own i'm busy

mhm, interesting ok, thousands of likes in one pagefield would not be possible. but what about a solution like this in such cases? should'nt it be possible to handle thousands of likes that way? it would be easy to store likes (or any other datatype) via the api and it would be easy to retrieve them. it would also be possible to show them in a paginated way with a runtime markup field and a lister (i guess). or (one day) maybe even with my datatables module (if anyone wants to join me on this project it would be appreciated)... dont get me wrong. i don't want to disagree about this, but i don't really get an idea of how a page reference with thousands of pages could look like. we also have the profields table that creates a database table with desired columns. only the interface for editing lacks support for large data. maybe the problem is just to have a proper way of presenting a large amount of pages inside the page editor (inside a field)? maybe my datatables would fill that gap? i'm using it all around in my projects, so i think there is a need for it. and i think it would be a great addition to processwire. do you agree or are you talking about something different?

hm.. ok i get the point when we are talking about the pagefield in general i agree that it can be limited at some point. i connected it to my datatables module to get a filterable, paginated list of selectable options: but in this case i'm only browsing many pages... i've never had the need to reference a lot of pages in a pagefield. can you give me some examples when you needed this @Robin S ?

of course it it possible i would recommend you to stay inside the pw backend and adapt it to your needs rather than building a frontend on your own. it's really versatile and easy to use once you get the basic concepts of inputfields:

never got any replies on that @Pete

you could do something like this: <input type="checkbox" id="checkall"> <script> $('#checkall').on('click', function() { $('#yourfield').find('input[type=checkbox]').prop('checked', true); }); </script> i don't think there is a need to "bloat" processwire with features when you get simple and taylormade solutions on google or the forum within some hours edit: i know the feeling of looking for plugins and solutions by the CMS for almost any feature you want. but the main feature of processwire is that it so so easy to adopt to your needs that you do not need all those ... plugins

i'm working on something in this direction i have to polish up a lot though. don't know when i find time...

hi androbey, welcome to the forum. you might already have an option for what you want: http://processwire.com/api/multi-language-support/multi-language-fields/#language-alternate-fields this would mean you also get different images for different languages, meaning more storage needed but also the option of different images in different languages https://github.com/adrianbj/AutoImagePages https://processwire.com/talk/topic/8698-creating-page-for-every-image-uploaded this creates a page for every uploaded image meaning you could have 1 image but multiple tags with a regular multilanguage-textfield

ah, i forgot to mention that i also played with ionic some weeks ago - but i think the ionic view app needs an internet connection. at least when you want to update your app. don't know how long it keeps apps in the storage for offline use (if it does at all).

Interesting project throwing in another idea: could it make sense to use a raspberry pi zero as hotspot&webserver? then you could browse the manual hostet from the pi with any device that connects to the pi just as if the connected to the online manual. at home where you have web access you could update your docs via cronjob so the pi would always have the current version of the docs. http://www.raspberryconnect.com/network/item/331-raspberry-pi-auto-wifi-hotspot-switch-no-internet-routing https://www.heise.de/ct/ausgabe/2017-22-Digitales-Flugblatt-Raspberry-Pi-mit-Batterie-als-anonymer-WLAN-Hotspot-und-Webserver-3851689.html (german)

i just mentioned that because the quality of help also depends on how one posts his questions. in that case it would be nice to reference one topic to the other so that everybody is following in the right context. lecture off and good luck with your attachments

...and please don't double post in different topics

yes

@adrian just wanted to make sure you didn't miss my quick note

hey @adrian its slower on laragon than on my live linux server but not that slow. its no factor for me since i can disable everything when i don't need it.

[pagebreak] ist a custom tag I'm using it is then replaced by rockreplacer. I haven't tried but I guess <pagebreak> will not work inside ckeditor, but try it

@adrian what about using readthedocs? https://docs.readthedocs.io/en/latest/getting_started.html

i think most of us can handle this pressure of course it will not pay back the time invested but it's nice to have the possibility to say thank you. but of course if someone wants to invest more time on a module making it commercial is totally fine. i'm also thinking about that topic... regarding the docs i would love to see some kind of standardisation here. maybe someone knows a good solution already.

i don't know how the guys from uikit are doing it but they have nice docs and it seems that everybody can post suggestions (there is an edit button on all pages): https://getuikit.com/docs/icon it's unbelievable how much you contributed to the community so far - a donation button would be the least imho. i've already asked you for that some time ago

yeah, i was just starting to write a reply here, then dave was first and then i decided to start a new topic, because we got offtopic here and i'm sure it's valuable information for others as well. here is the tutorial:

hi @mtwebit welcome to the forum and thanks for that module! i've created something similar for one of my projects but it's custom and not built into a module so i think there's potential for what you are doing some ideas/questions/feedback: use InputfieldMarkup to structure your custom code and make it look&feel more native. see my new tutorial here: do you know the wirequeue module? would be great to have an easy way to integrate this into other modules or custom pages. maybe it is already possible - i'll have a look when i have more time This is how my progressbar looks like using InputfieldMarkup:

Edit: Because of the great response to this topic I wrote a guest blogpost: https://processwire.com/blog/posts/building-custom-admin-pages-with-process-modules/ One of the hidden treasures of processwire seems to be the creation of custom admin pages. Technically speaking those pages are ProcessModules - but i guess that's the reason why so many people out there seem to be afraid of building them... it sounds so hard! You've never created a module for ProcessWire? You have never created a plugin for any other CMS? You have no clue about OOP with all its classes, methods and properties? No problem! I'll show you how simple you can start: <?php class CustomAdminPage extends Process { public static function getModuleinfo() { return [ 'title' => 'Custom Admin Page Example', 'summary' => 'Minimalistic ProcessModule to show that nobody has to be afraid of building custom admin pages.', 'href' => 'https://processwire.com/talk/topic/17709-how-to-create-custom-admin-pages-aka-processmodules-yes-its-that-simple/', 'author' => 'Bernhard Baumrock, baumrock.com', 'version' => 1, // page that you want created to execute this module 'page' => [ 'name' => 'customadmin', // your page will be online at /youradmin/setup/customadmin/ 'parent' => 'setup', 'title' => 'Custom Admin Page Example' ], ]; } public function ___execute() { return 'This is the most simple Admin-Page you have ever seen :)'; } } Now save this file as CustomAdminPage.module and place it in your /site/modules folder. After a refresh it will show your module in the modules manager of your site where you can install it: After installation you already have your first very own admin page! Congratulations! Was not too hard, was it? It's as simple as that! Now lets add some more custom HTML. And to show you another nice feature we will add this code to a separate method called executeDemo(). And because everything is so simple we will also add some javascript to this page public function ___executeDemo() { $out = ''; $out .= '<h1>H1 has some special css styling in the admin, thats why it seems to have no effect</h1>'; $out .= '<h2>H2 looks different ;)</h2>'; $out .= '<h3>...and so does H3</h3>'; $out .= '<button onclick="myFunction()">Click me</button>'; $out .= '<script>function myFunction() { alert("this is a demo javascript"); }</script>'; return $out; return ''; } Now thanks to ProcessWire-magic your page will already have its own URL: Just append /demo to your url and see what you get: And of course don't forget to click the button Ok, now that code looks a bit hacky, right? Inputfields and especially InputfieldMarkup for the win! We add another method with some advanced code. To use inputfields we need a form that holds all those inputfields and that makes it possible to handle user input lateron. See somas great tutorial about forms here for a quickstart and more details: public function ___executeAdvanced() { $out = '<h2>A more complex Example</h2>'; $form = wire()->modules->get('InputfieldForm'); $field = wire()->modules->get('InputfieldMarkup'); $field->label = 'Markup Test 1'; $field->value = '<h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4>'; $form->add($field); $out .= $form->render(); return $out; } Ok, it get's boring Let's do something more fun and add a chart in a second field and change the fields to 50% screen width (I'm sure you know that already from the GUI template editor)! public function ___executeAdvanced() { $out = '<h2>A more complex Example</h2>'; $form = wire()->modules->get('InputfieldForm'); $field = wire()->modules->get('InputfieldMarkup'); $field->label = 'Markup Test 1'; $field->value = '<h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4>'; $field->columnWidth = 50; $form->add($field); $field = wire()->modules->get('InputfieldMarkup'); $field->label = 'Chart Sample'; $field->value = '$chart'; //$field->notes = 'Example code taken from here: http://www.chartjs.org/docs/latest/getting-started/usage.html'; $field->columnWidth = 50; $form->add($field); $out .= $form->render(); return $out; } OK, we are almost there... we only need to add the chart library! To keep everything clean we will put the code for the chart in another method. We will make that method PRIVATE to add some security. Our new Method: private function renderChart() { // prepare chart code wire()->config->scripts->add('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js'); ob_start(); ?> <canvas id="myChart"></canvas> <script> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); </script> <?php return ob_get_clean(); } Now we just need to call $this->renderChart() in the right place! Here is the complete Module: <?php class CustomAdminPage extends Process { public static function getModuleinfo() { return [ 'title' => 'Custom Admin Page Example', 'summary' => 'Minimalistic ProcessModule to show that nobody has to be afraid of building custom admin pages.', 'href' => 'https://processwire.com/talk/topic/17709-how-to-create-custom-admin-pages-aka-processmodules-yes-its-that-simple/', 'author' => 'Bernhard Baumrock, baumrock.com', 'version' => 1, // page that you want created to execute this module 'page' => [ 'name' => 'customadmin', // your page will be online at /youradmin/setup/customadmin/ 'parent' => 'setup', 'title' => 'Custom Admin Page Example' ], ]; } public function ___execute() { return 'This is the most simple Admin-Page you have ever seen :)'; } public function ___executeDemo() { $out = ''; $out .= '<h1>H1 has some special css styling in the admin, thats why it seems to have no effect</h1>'; $out .= '<h2>H2 looks different ;)</h2>'; $out .= '<h3>...and so does H3</h3>'; $out .= '<button onclick="myFunction()">Click me</button>'; $out .= '<script>function myFunction() { alert("this is a demo javascript"); }</script>'; return $out; return ''; } public function ___executeAdvanced() { $out = '<h2>A more complex Example</h2>'; $form = wire()->modules->get('InputfieldForm'); $field = wire()->modules->get('InputfieldMarkup'); $field->label = 'Markup Test 1'; $field->value = '<h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4>'; $field->columnWidth = 50; $form->add($field); $field = wire()->modules->get('InputfieldMarkup'); $field->label = 'Chart Sample'; $field->value = $this->renderChart(); $field->notes = 'Example code taken from here: http://www.chartjs.org/docs/latest/getting-started/usage.html'; $field->columnWidth = 50; $form->add($field); $out .= $form->render(); return $out; } private function renderChart() { // prepare chart code wire()->config->scripts->add('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js'); ob_start(); ?> <canvas id="myChart"></canvas> <script> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); </script> <?php return ob_get_clean(); } } I hope you enjoyed reading this and it will open up many new possibilities for you! Updates: permissions: https://processwire.com/talk/topic/17709-how-to-create-custom-admin-pages-aka-processmodules-yes-its-that-simple/?do=findComment&comment=174746 tutorial on file uploads: https://processwire.com/talk/topic/17709-how-to-create-custom-admin-pages-aka-processmodules-yes-its-that-simple/?do=findComment&comment=185261 snippet how to use NavJSON: https://processwire.com/talk/topic/17709-how-to-create-custom-admin-pages-aka-processmodules-yes-its-that-simple/?do=findComment&comment=216412

thx, didn't know that - a search led me to the plugin i mentioned above...

if you want to register urls to open directly in vscode you can use this plugin and follow the instructions: https://github.com/shengyou/vscode-handler then fill in the 2 fields in tracy (url + local path) and you can directly click on links and they will open up in vscode