Jump to content

Fieldtype Page Table Grid – Page Builder Preview


Recommended Posts

Fieldtype Page Table Grid

This is a sneak preview of a side project I've been working on for quite some time now. A lot of work and thought has gone into this, so I will most likely release this as a commercial module at some point in the near future. 

As a designer (and developer) I get the appeal of a WYSIWYG editor. After playing around with some WYSIWYG page builder tools, I always felt something was wrong about them. So I decided to build my own PW version based on PageTable.

Here is a small demo (using AdminThemeCanvas, but its working with other admin themes as well) :

There is also a complete website that I built for a friend of mine using this module and some custom blocks.

Concept

This fieldtype shares a lot of features with PageTableExtended: it's also an extension of PageTable and renders the block templates in the backend and frontend (native PW templates and fields). You can also add your own css via module settings.

The difference is, this fieldtype also gives you the ability to rearrange and resize elements in a visual way as well as enable inline editing for text, ckeditor and file fields. Similar (and promising) attempts have been made, but I wanted something based on native CSS grid instead of a CSS framework...so I built my own version. Most CSS frameworks are based on flexbox, which is great for layouting elements horizontally. With CSS grid, you can place elements horizontally and vertically, allowing for layouts that were not previously possible with CSS. Similar to webflow, this fieldtype uses javascript (in the backend) to let you manipulate CSS grid in a visual way to design fully responsive websites (or parts of them). It should still be possible to include a CSS framework if you like (just add the classes to your block markup and include the CSS via module settings).

The CSS grid layout manipulations are saved in a single field as a JSON array and used to generate a dynamic stylesheet that you simply include in your main template (no inline styles). The styles are saved within the breakpoint you select and cascade down to smaller breakpoints. That means you can specify just the basic breakpoint and adjust other breakpoints if needed. The exception is the mobile breakpoint which will display everything in one column as a default (you can change the layout here too).

The fieldtype also comes with an optional style panel to manipulate some additional CSS properties directly on the page. You can customize the panel or disable it completely from the module settings (and just use a CSS file that you include via module settings). The style panel is based on inputfields (nothing is saved to the database). This means that you just have to install the module and all fields are available to all blocks automatically (this can be customized). It also has the benefit that your installation is not flooded with fields; this module only installs one field.

Don't want to give your customer all that power? Design features can be disabled for certain roles. The grid editor role can just edit the content and use the inline editing feature to edit content quickly. You can then also grant access individually to the style panel, resize or drag functionality.

Features

  • Blocks are just pages
  • Blocks are defined by native PW templates and fields
  • Manipulate CSS grid in a visual way to design fully responsive websites (or parts of them)
  • Design features can be disabled for certain roles
  • Inline editing of text, ckeditor and file fields
  • The layout is 100% CSS grid (very small css file size)
  • Simply drag and resize to manipulate grid items directly inside the backend
  • Manipulate grid columns and rows directly on the page (use any number of columns you want)
  • All style manipulations are saved as JSON and used to generate a dynamic stylesheet that you just include in your main template (no inline styles)
  • Nested groups/grids (child pages of nested blocks are created under group parent)
  • Global blocks work with page reference field (changes on one page, changes all blocks on all pages)
  • Manual and auto placement of grid items
  • Define custom icons for your blocks via native template settings (template -> advanced -> icon)
  • Option to load lazysizes in the backend to enable lazy loading of assets with class lazyload
  • Works with all default and ui-kit based admin themes

If you have any questions or feedback, let me know.

  • Like 17
Link to comment
Share on other sites

This is impressive and fulfills a lot of requirements I am looking for this type of page builder. I particularly like the use of blocks as pages (maintaining the PW flexibility to reference these blocks from other pages), that styles are saved separately in JSON and a stylesheet in generated for each page (which you can check in the source code of your example), and above all the use of CSS grids that allow much more complex and visually interesting layouts. I wouldn't let my clients touch this kind of interface unless they're design-savvy, so I'm glad that design features can be disabled for certain roles. Congrats!

  • Like 1
Link to comment
Share on other sites

57 minutes ago, jacmaes said:

@jploch, could you explain what each icon in the sidebar does? You demonstrate a headline, a video and some images in your video, but what else is available?

There are a couple of blocks that I did not show. I can add another video to showcase those, when I find some time. In the meantime you can check out https://www.michael-philipp-bader.com/ to see them in the frontend. The home page (overview) for example features a gallery block that opens an image or video in a light box. On the contact page you can see a map block that uses the Leaflet Map Marker module. On the portfolio page there s a page reference block that loads all the selected pages/projects. 

I just want to be clear that it's up to the developer to create as many blocks as they like. Blocks can have all the fields that are available in PW. You just create a template and assign fields (like you normally do) and add that template to this fieldtype. Then you create a file with the name of that template in your template folder (or subfolder if you use the delegate template approach feature of this module) with the markup that gets rendered. You can also add a special class to elements you want to make draggable/resizable. More instructions on how to use this, with code examples will follow, once it's ready.

 

  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...

I just added some new features.
– All blocks can be cloned now.  Which makes adding content very fast
– More options to control access of blocks individually. You can lock editing of blocks completely or disable features such as cloning, styling or content editing for certain roles

I was also thinking about the best approach to copy blocks between PW installations or to share them with others. The easiest way I found was to export/import a page, with all the blocks you want added, using adrians migrator module. The export code together with the block template files could be shared with others or imported into existing installations. So this would be an option until we hopefully have something in the core to make migrations work better. An alternative would be to store everything as JSON (including the content) and using something similar to the Mystique Module to let the developer add fields based on config files. That also has the benefit of being able to have the files version controlled. The downside of using the JSON only approach would be inferior searchability of fields. Also making it work with every fieldtype would be a challenge. I'm interested how others feel about this.

  • Like 1
Link to comment
Share on other sites

16 hours ago, jploch said:

I was also thinking about the best approach to copy blocks between PW installations or to share them with others.

Have you had a look at RockMigrations? You get the best of both your worlds: Easy migrations + version control...

 

  • Like 1
Link to comment
Share on other sites

21 minutes ago, bernhard said:

Have you had a look at RockMigrations? You get the best of both your worlds: Easy migrations + version control...

I saw this a while ago, but just had a brief look at it. I will play around with this some more, but this might be even too complicated for my needs. The target group for my module are not only web developers, but also non technical people like designers, experienced editors, or marketers. I need a way for these people to import new blocks as well. 

Link to comment
Share on other sites

I know it feels complicated in the beginning. I've been there 4 years ago when Lostkobrakai was talking about that mystical thing called Migrations. I've put a lot of effort into my module to make simple things simple without the technical overhead of needing custom classes for each migration like in the other module (that has other benefits of course).

https://processwire.com/talk/topic/21212-rockmigrations-easy-migrations-from-devstaging-to-live-server/?do=findComment&comment=208165

$rm->migrate([
  'fields' => [
    'foo' => [
      'type' => 'text',
      'label' => 'My foo field',
    ],
    'bar' => [
      'type' => 'text',
      'label' => 'My bar field',
    ],
  ],
  'templates' => [
    'mybuilderblock' => [
      'tags' => 'MyBuilder',
      'fields' => ['title', 'foo', 'bar'],
    ],
  ],
]);

It really can't get simpler than that! And I think that is something that can be done by anybody - even non-coders. TracyDebugger does even have a "field code" panel where you get those code snippets. So you can create fields and copy the code over. Once familiar with the field properties (they are always the same) you get a LOT more efficient with code setup. Add a new field? copy the 3 lines of "bar", rename the field, done. Make those 3 fields have all 33% width? Use multicursor in your IDE and all fields are 33%.

Compare that to field import/export or other setups... Edit field 1, set field width, save. Edit field 2, set field width, save. Edit field 3, set field width, save. Don't like the result? Edit field 1........... you get it 😉 

okYjsWz.gif

Link to comment
Share on other sites

@bernhard Thanks for your examples. It does look simple to create a migration. It would be nice if a non technical person could then easily paste that code into the backend, click a button and everything is imported. Is that possible with your module? I don't want that person to open an editor, that person might not even have access to FTP. With  adrians migrator module it's possible to import the code/JSON in the backend and create all the pages, templates and fields in one import. I'm not saying that this is somehow better than how your module works, it just might be better suited for my usecase. Your module clearly has a lot of benefits compared to migrator.

Link to comment
Share on other sites

  • 4 months later...

Hey folks!
Just wanted to give you an update on this. Iam close to an alpha release now. I added a lot of features (containers/groups, more styling options, api functions, optional webfonts/google fonts integration, UI improvments etc.) and bug fixes and now it feels quite stable. I still have to do some testing and some UI stuff. Iam really exited to show you the new version soon! 🤩

Before I can post a final release date I have to think a little bit about how the JSON for the styling is saved and make sure that it's solid. I have two approaches and can't decide which one is best. Maybe someone, who used page table (my module uses templates/fields just like page table), can help me figure this out. It works like this:

When a new block/page is added to the page table, my module auto generates a title and a name. The title is generated based on the name of the template the page item is using plus the page id.

I title could look like this:
block_image_5143

This title (with sanitizer) is then used as an ID to save all the styling information for that item/page to my JSON field (it's also used to generate a css class name). The ID has to be unique in the context of the page containing the page table items. I figured I can't use the page id or the page name, because when a page containing a page table grid is cloned, all the items/pages added to the page table get duplicated and change their name and ids, so the clone loses all the styling information. So while it works great with the title field, it has the downside, that when the user changes the title, the connection to the ID/title in the JSON gets lost. So an alternative approach Iam considering now is to add an extra field to every page table item template automatically via api (pupulated on item/page creation), eg. pgrid_id. This field only has superuser access or is completly hidden. While this adds a little more overhead, it may be the better approach. What do you guys think is better?

Link to comment
Share on other sites

Shouldn't it be enough to associate the styles with the block page's id and make sure cloning a page also clones its associated styles? If you assign a unique id (pgrid_id) to each block but keep that around after cloning, you won't be able to edit the cloned page's styles without it affecting the original page's styles. Or maybe I'm missing a part of the picture here.

  • Like 1
Link to comment
Share on other sites

2 hours ago, d'Hinnisdaël said:

Shouldn't it be enough to associate the styles with the block page's id and make sure cloning a page also clones its associated styles?

Thx for your input! Just to be sure we are on the same page here. 
Iam talking about the parent page with my grid field, that holds all the childpages, lets call them blocks.
So cloning this parent page from the page tree with the copy button, causes all the blocks on the clone to change their page id (need to be unique) and page name, the page title however will not change, so setting the title as the JSON ID will keep the styling information without any need for a comparison of IDs or additional fields. As I understand it, going with ids would need a hook on page add/clone to handle the switch of IDs or all the styling information is lost. Using the title field or a custom field to simply copy the same JSON id to the new page (page clone does this automatically) worked well so far.  Iam worried when external pages that already exists in the page tree are added to the page grid field (eg. via api) it would not be a good idea to use the title field here, because it maybe be accidentally changed by the user and lose its connection with the JSON id. Also not sure I was clear, the JSON data lives on the parent page, I only need a way to connect the blocks with the JSON id. Hope that makes sense 🙂

Link to comment
Share on other sites

I see. In that case creating a custom field would probably be best and have little overhead if it's autoloaded.

What's the reasoning behind storing the data on the parent and not on the children? Performance? Storing it on the children, you could use the `$page->meta()` api and avoid the need for hooks since that should be cloned alongside the page. It currently only allows associative arrays and might have a performance penalty as well.

  • Like 1
Link to comment
Share on other sites

1 hour ago, d'Hinnisdaël said:

What's the reasoning behind storing the data on the parent and not on the children?

I tried to keep it simple and was also concerned with performance. Updating the JSON field on the parent page is easy. Storing the data on the children/blocks would mean I have to update the JSON via ajax every time the blocks style is updated (not a big deal). Also there are some settings for the parent page I need to save as well, so it seemed like a good approach to have just one JSON field to keep all the data in one place. Maybe I will consider moving the JSON to each block instead, but that would mean a lot of refactoring needs to be done. Also what will happen if the same block page is added to two different grid fields/parent pages, then it could only have one style that is associated with the block. With my current approach, it would be possible to have different styles for the same block, since the JSON is stored on the parent. I have to think about this a little.

Thanks for looking into this! I have a tunnel vision by now, and there are so many things to consider, it's very helpful to get a fresh perspective on it.

Link to comment
Share on other sites

still it would be nice to just use the title field as the block id without the need for an additional custom field. The title is not really needed in the context of the block, so I could just hide it in the editor. Since the block pages are hidden under the admin page in the tree (this can be changed in field settings, but maybe I will remove that setting and make that the default), there is no real danger to acidentally change the title of a block manually. That way I don't have to take care of installing/uninstalling the custom field.

I guess the main question is if it should be possible to add existing pages to my grid, that do not use the block templates but are just regular pages in the tree. For those cases the title field would not be a good option. However it would still be possible to include those pages with a block that has a page reference field. This would also be a better option to include existing pages, since it's much more clear there is an actual connection to another page. 

Link to comment
Share on other sites

Accepting arbitrary pages sounds like a nightmare to support. There's really no upside to it that I can see. Linking existing pages via page reference fields sounds much more doable and logical. You'll avoid all those problems you already recognized.

  • Like 1
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Robin S
      Repeater Easy Sort
      Adds a compact "easy-sort" mode to Repeater and Repeater Matrix, making those fields easier to sort when there are a large number of items.
      The module also enhances Repeater Matrix by allowing a colour to be set for each matrix type. This colour is used in the item headers and in the "add new" links, to help visually distinguish different matrix types in the inputfield.
      Screencasts
      A Repeater field

      A Repeater Matrix field with custom header colours

      Easy-sort mode
      Each Repeater/Matrix item gets an double-arrow icon in the item header. Click this icon to enter easy-sort mode.
      While in easy-sort mode:
      The items will reduce in width so that more items can be shown on the screen at once. The minimum width is configurable in the field settings. Any items that were in an open state are collapsed, but when you exit easy-sort mode the previously open items will be reopened. You can drag an item left/right/up/down to sort it within the items. The item that you clicked the icon for is shown with a black background. This makes it easier to find the item you want to move in easy-sort mode. You can click an item header to open the item. An "Exit easy-sort mode" button appears at the bottom of the inputfield. Configuration
      In the field settings for Repeater and Repeater Matrix fields you can define a minimum width in pixels for items in easy-sort mode. While in easy-sort mode the items will be sized to neatly fill the available width on any screen size but will never be narrower than the width you set here.
      In the field settings for Repeater Matrix you can define a custom header colour for each matrix type using an HTML "color" type input. The default colour for this type of input is black, so when black is selected in the input it means that no custom colour will be applied to the header.
      Exclusions
      The easy-sort mode is only possible on Repeater/Matrix fields that do not use the "item depth" option.
       
      https://github.com/Toutouwai/RepeaterEasySort
      https://processwire.com/modules/repeater-easy-sort/
    • By FireWire
      Hello community!

      I want to share a new module I've been working on that I think could be a big boost for multi-language ProcessWire sites.

      Some background, I was looking for a way for our company website to be efficiently translated as working with human translators was pretty laborious and a lack of updating content created a divergence between languages. I, and several other devs here, have talked about translation integrations and have recognized the power that DeepL has. DeepL is an AI deep learning powered service that delivers translation quality beyond any automated service available. After access to the API was opened up to the US, I built Fluency, a DeepL translation integration for ProcessWire.
      Fluency brings automated translation to every multi-language field in the admin, and also provides a translation tool allowing the user to translate their text to any language without it being inside a template's field. With Fluency you can:
      Translate any plain textarea or text input Translate any CKEditor content (yes, with markup) Translate page names for fully localized URLs on every page Translate your in-template translation function wrapped strings Translate modules Fluency is free, and now so is DeepL
      Since this module was first built DeepL has introduced free Developer accounts that allow anyone to start using Fluency at zero cost and beginning with the version 0.3.0 release Fluency now supports free DeepL accounts. As of June 2021 DeepL supports translation to 26 languages and continues to offer more.
      Installation and usage is completely plug and play. Whether you're building a new multi-language site, need to update a site to multi-language, or simply want to stop manually translating a site and make any language a one-click deal, it could not be easier to do it. Fluency works by having you match the languages configured in ProcessWire to DeepL's. You can have your site translating to any or all of the languages DeepL translates to in minutes (quite literally).
      Let's break out the screenshots...
      When the default language tab is shown, a message is displayed to let users know that translation is available. Clicking on each tab shows a link that says "Translate from English". Clicking it shows an animated overlay with the word "Translating..." cycling through each language and a light gradient shift. Have a CKEditor field? All good. Fluency will translated it and use DeepL's ability to translate text within HTML tags. CKEditor fields can be translated as easily and accurately as text/textarea fields.

      Repeaters and AJAX created fields also have translation enabled thanks to a JavaScript MutationObserver that searches for multi-language fields and adds translation as they're inserted into the DOM. If there's a multi-language field on the page, it will have translation added.

      Same goes for image description fields. Multi-language SEO friendly images are good to go.

      Creating a new page from one of your templates? Translate your title, and also translate your page name for native language URLs. (Not available for Russian, Chinese, or Japanese languages due to URL limitations). These can be changed in the "Settings" tab for any page as well so whether you're translating new pages or existing pages, you control the URLs everywhere.

      Language configuration pages are no different. Translate the names of your languages and search for both Site Translation Files (including all of your modules)

      Translate all of the static text in your templates as well. Notice that the placeholders are retained. DeepL is pretty good at recognizing and keeping non-translatable strings like that. If it is changed, it's easy to fix manually.

      Fluency adds a "Translate" item to the CMS header. When clicked this opens up a modal with a full translation tool that lets the user translate any language to any language. No need to leave the admin if you need to translate content from a secondary language back to the default ProcessWire language. There is also a button to get the current API usage statistics. DeepL account owners can set billing limitations via character count to control costs. This may help larger sites or sites being retrofitted keep an eye on their usage. Fluency can be used by users having roles given the fluency-translate permission.

      It couldn't be easier to add Fluency to your new or existing website. Simply add your API key and you're shown what languages are currently available for translation from/to as provided by DeepL. This list and all configuration options are taken live from the API so when DeepL releases new languages you can add them to your site without any work. No module updates, just an easy configuration. Just match the language you configured in ProcessWire to the DeepL language you want it to be associated with and you're done. Fluency also allows you to create a list of words/phrases that will not be translated which can prevent items such as brands and company names from being translated when they shouldn't

       
      Limitations:
      No "translate page" - Translating multiple fields can be done by clicking multiple translation links on multiple fields at once but engineering a "one click page translate" is not feasible from a user experience standpoint. The time it takes to translate one field can be a second or two, but cumulatively that may take much longer (CKEditor fields are slower than plain text fields). There may be a workaround in the future but it isn't currently on the roadmap. See a solution below... No "translate site" - Same thing goes for translating an entire website at once. It would be great, but it would be a very intense process and take a very (very) long time. There may be a workaround in the future but it isn't on the roadmap. No current support for Inline CKEditor fields - Handling for CKEditor on-demand hasn't been implemented yet, this is planned for a future release though and can be done. I just forgot about it because I've never really used that feature personally.. Alpha release - This module is in alpha. Releases should be stable and usable, but there may be edge case issues. Test the module thoroughly and please report any bugs via a Github issue on the repository or respond here. Please note that the browser plugin for Grammarly conflicts with Fluency (as it does with many web applications). To address this issue it is recommended that you disable Grammarly when using Fluency, or open the admin to edit pages in a private window where Grammarly may not be loaded. This is a long-standing issue in the larger web development community and creating a workaround may not be possible. If you have insight as to how this may be solved please visit the Github page and file a bugfix ticket.
      Enhancements
      Translate All Fields On A Page
      An exciting companion module has been written by @robert which extends the functionality of Fluency to translate all fields on a page at once. The module has several useful features that can make Fluency even more useful and can come in handy for translating existing content more quickly. I recommend reading his comments for details on how it works and input on best practices later in this thread.
      Get the module at the Github repo: https://github.com/robertweiss/ProcessTranslatePage
      Requirements:
      ProcessWire  3.0+ UIKit Admin Theme That's Fluency in a nutshell. A core effort in this module is to create it so that there is nothing DeepL related hard-coded in that would require updating it when DeepL offers new languages. I would like this to be a future-friendly module that doesn't require developer work to keep it up-to-date.
      The Module Is Free
      This is my first real module and I want to give it back to the community as thanks. This is the best CMS I've worked with (thank you Ryan & contributors) and a great community (thank you dear reader).
      DeepL Developer Accounts
      In addition to paid Pro Developer accounts, DeepL now offers no-cost free accounts. Now all ProcessWire developers and users can use Fluency at no cost. Learn more about free and paid accounts by visiting the DeepL website. Sign up for a Developer account, get an API key, and start using Fluency.
      Download & Feedback
      Download the latest version here
      https://github.com/SkyLundy/Fluency-Translation/archive/main.zip
      Github repository:
      https://github.com/SkyLundy/Fluency-Translation
      File issues and feature requests here (your feedback and testing is greatly appreciated):
      https://github.com/SkyLundy/Fluency-Translation/issues
       
      Thank you! ¡Gracias! Ich danke Ihnen! Merci! Obrigado! Grazie! Dank u wel! Dziękuję! Спасибо! ありがとうございます! 谢谢你!

    • By kixe
      Field that stores one or more references to ProcessWire pages with additional data in field context.
      Values are editable via page edit modal of the referenced page provided from the field if module AdminPageFieldEditLinks is installed and "Enable link to create new pages?" is checked in field settings.
      Requirements: AdminPageFieldEditLinks >= 3.1.4
      https://github.com/kixe/FieldtypePageContextData
      https://processwire.com/modules/fieldtype-page-context-data/
      Use case example:
      The planning of the Tonmeistertagung in the CCD (Congress Center Düsseldorf) from November 3rd, 2021 to November 6th, 2021 is in the finalization phase.
      The conference consists of a conference part and an exhibition. The planning is done via a separate frontendless PW instance. There, all companies (pages) that are active at various events are kept in a pool. Changes (address, logo) can always be done there. For the exhibition of the current conference in November, the exhibitor-companies (pages) are selected via a page reference field. A stand number must now be assigned to each selected company (page). We had originally solved this using the Profield FieldtypeTable. However, this had the disadvantage that each entry again made all companies available for selection and did not recognize which were already selected in a previous table row. The new field type now allows the value (company's stand number) to be assigned to a Company (page) in context to a specific Pagefield living in a specific page.
      https://tonmeistertagung.com/en/exhibitors/exhibition/
       
    • By Robin S
      This module lets you add some custom menu items to the main admin menu, and you can set the dropdown links dynamically in a hook if needed.
      Sidenote: the module config uses some repeatable/sortable rows for the child link settings, similar to the ProFields Table interface. The data gets saved as JSON in a hidden textarea field. Might be interesting to other module developers?
      Custom Admin Menus
      Adds up to three custom menu items with optional dropdowns to the main admin menu.
      The menu items can link to admin pages, front-end pages, or pages on external websites.
      The links can be set to open in a new browser tab, and child links in the dropdown can be given an icon.
      Requires ProcessWire v3.0.178 or newer.
      Screenshots
      Example of menu items

      Module config for the menus

      Link list shown when parent menu item is not given a URL

      Advanced
      Setting child menu items dynamically
      If needed you can set the child menu items dynamically using a hook.
      Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); if($menu_number === 1) { $colours = $event->wire()->pages->findRaw('template=colour', ['title', 'url', 'page_icon']); $children = []; foreach($colours as $colour) { // Each child item should be an array with the following keys $children[] = [ 'icon' => $colour['page_icon'], 'label' => $colour['title'], 'url' => $colour['url'], 'newtab' => false, ]; } $event->return = $children; } }); Create multiple levels of flyout menus
      It's also possible to create multiple levels of flyout submenus using a hook.

      For each level a submenu can be defined in a "children" item. Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); if($menu_number === 1) { $children = [ [ 'icon' => 'adjust', 'label' => 'One', 'url' => '/one/', 'newtab' => false, ], [ 'icon' => 'anchor', 'label' => 'Two', 'url' => '/two/', 'newtab' => false, 'children' => [ [ 'icon' => 'child', 'label' => 'Red', 'url' => '/red/', 'newtab' => false, ], [ 'icon' => 'bullhorn', 'label' => 'Green', 'url' => '/green/', 'newtab' => false, 'children' => [ [ 'icon' => 'wifi', 'label' => 'Small', 'url' => '/small/', 'newtab' => true, ], [ 'icon' => 'codepen', 'label' => 'Medium', 'url' => '/medium/', 'newtab' => false, ], [ 'icon' => 'cogs', 'label' => 'Large', 'url' => '/large/', 'newtab' => false, ], ] ], [ 'icon' => 'futbol-o', 'label' => 'Blue', 'url' => '/blue/', 'newtab' => true, ], ] ], [ 'icon' => 'hand-o-left', 'label' => 'Three', 'url' => '/three/', 'newtab' => false, ], ]; $event->return = $children; } }); Showing/hiding menus according to user role
      You can determine which menu items can be seen by a role by checking the user's role in the hook.
      For example, if a user has or lacks a role you could include different child menu items in the hook return value. Or if you want to conditionally hide a custom menu altogether you can set the return value to false. Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); $user = $event->wire()->user; // For custom menu number 1... if($menu_number === 1) { // ...if user does not have some particular role... if(!$user->hasRole('foo')) { // ...do not show the menu $event->return = false; } } });  
      https://github.com/Toutouwai/CustomAdminMenus
      https://processwire.com/modules/custom-admin-menus/
    • By tcnet
      This module for ProcessWire sends a notification email for each failed login attempt. Similar modules exists already in the module directory of ProcessWire. However, this module is designed to notify, even if specified user doesn't exist.
      Settings
      The settings for this module are located in the menu Modules=>Configure=>LoginFailNotifier.
      Notification email
      Specifies the email address to which the notification emails should be sent.
        Email subject
      Specifies the subject line for the notification email.
        Post variables
      Specifies the $_POST variables to be included in the notification email. Each variable must be separated by a comma. For example: login_name,login_pass
        Server variables
      Specifies the $_SERVER variables to be included in the notification email. Each variable must be separated by a comma. For example: REMOTE_ADDR,HTTP_USER_AGENT
      Link to ProcessWire module directory:
      https://processwire.com/modules/login-fail-notifier/
      Link to github.com:
      https://github.com/techcnet/LoginFailNotifier
×
×
  • Create New...