Download the PHP package nr/pagetablenext without Composer

PageTableNext

What it does

This module is a solid base for the implementation of custom builder systems and modular template systems. It provides a list of PageTable based content elements and adds an intuitive UI to the ProcessWire backend to make content creation and editing as simple and fun as possible. It offers functions to create, publish, move, delete, hide, copy and paste content elements.

The rendering logic of the module is detached from the ProcessWire backend scope via Shadow DOM and allows for custom rendering and styling of the elements in the backend, so the backend preview can look identical to the front end, or anything like you can imagine. It ships with some helper functions that simplify the handling of content elements.

The module extends Ryan's PageTable and is strongly inspired by PageTableExtended by mademyday. Big thanks to both of them.

Features

• Custom rendering (e.g. frontend preview) in the backend. Content elements are encapsulated in Shadow DOM.
• Instant publishing and unpublishing.
• Copy and paste with check of allowed templates (page-wide).
• Editing in the ProcessWire modal.
• Instant deletion of content elements.
• Custom JavaScript actions can be easily added.
• Page references support.
• Triggers save on all referenced pages (e.g. clear cache).
• Shows the "view" link in the edit view that leads to the referenced page .
• Manipulates the breadcrumb navigation of the content element (Shows the first referenced page).
• Support for ProcessGraphQL with the additional modules GraphQLFieldtypePageTable and GraphQLFieldtypePageTableNext

Install (Short way)

1. Copy the files for this module to and Install PageTableNext, FieldtypePageTableNext and InputfieldPageTableNext.
2. Enter your favorite field name and click "Setup Field" in Module Configuration.
3. Add the field to your page template and add some content element templates to the PageTableNext field.

Install (Long way)

1. Copy the files for this module to and Install PageTableNext, FieldtypePageTableNext and InputfieldPageTableNext.
2. Create a new template (e.g. "content-elements").
   • In the tab "Access" set the permission management to "Yes", then check "View page" and "Guest".
   • Optional: In the tab "Family" set the option "Can this template be used for new pages?" to "One".
   • Optional: In the "Advanced" tab, check the options "Don't allow pages to change their template?" and "Don't allow unpublished pages".
3. Create a new page which will act as a container for the content elements (as child of Admin) with the title e.g. "Content Elements". Choose the template from step 2 ("content-elements")
4. Create a new field of type PageTableNext (e.g. ptn)
   • "Details" tab
     • Select one or more templates for your content elements under "Select one or more templates for items".
     • Optional: In "Select a parent for items" select the container page you created in step 3.
     • Optional: Configure the following at "Page behaviors":
       • Delete: Delete them
       • Trash: Nothing
       • Unpublish: Nothing
   • "Input" tab
     • Optional: For "Automatic Page Name Format" add .
     • Path to content element templates: Add the path for the front- and backend rendering of the content elements. The path is relative to /site/templates/fields/ e.g. "ptn/". The name of the PHP template file must match the name of the template.
5. Copy the file from the module folder to the folder . Replace "ptn" with your field name
6. Add the field to your page template and add some content element templates to the new PageTableNext field.

Install via composer

1. Execute the following command in your website root directory. `js class PtnContent extends HTMLElement { constructor() { / some code here/ } }

customElements.define('ptn-content', PtnContent); /site/modules/PageTableNext/templates//site/templates/PageTableNext/site/templates/PageTableNext/content.cssshell cd site/templates/PageTableNext/ ln -s path/to/your/style.css content.css /site/modules/PageTableNext/templates/ptn-content.php/site/templates/PageTableNext/ptn.phpjs class MyContent extends PtnContent { constructor() { super();

    // Add alpine init to the custom element
    document.addEventListener('alpine:init', () => {
        Alpine.initTree(this.shadowRoot);
        setTimeout(function () { window.dispatchEvent(new Event('resize')); }, 400)
    }, { once: true})
}

}

// Define new custom element if(!customElements.get('my-content')) { customElements.define('my-content', MyContent); } ptn-content.phpptn-contenthtml <a class="uk-icon-button uk-icon ptn_actions_custom" data-actioncustom='{"name": "myaction", "params": "your method input"}' href="#" uk-icon="icon: bolt; ratio: .8" title="<?= __('My Custom Action'); ?>"

ptn.phphtml

graphql query { home { first { id name title ptn { getTotal list { id type render } } } } } json { "data": { "home": { "first": { "id": "1", "name": "home", "title": "Home", "ptn": { "getTotal": 2, "list": [ { "id": "1193", "type": "CeText", "template": "ce-text", "render": "

Hello World

" }, { "id": "1194", "type": "CeImage", "template": "ce-image", "render": "

Nice pictures

<img ....>" } ] } } } } }

![GraphQL](https://user-images.githubusercontent.com/11630948/246352654-886dc0ba-4c84-4f0b-a923-bc5b08849f79.png)
*GraphQL query with Postman*

## ToDos
- Refactor content element handling with Alpine.js
- Video-Tutorial