How to Clone Pagetable Items

[Orkun]

Hi Guys

How can I achieve, that editors can clone pagetable content items?
For example displaying some kind of icon/link right after the trash icon inside the pagetable table to clone the respective content item/page.
As far as I know the method where the trash icon gets added is not hookable.

What would you do?

KR
Orkun

[Orkun]

No one?

[kongondo]

Three possibilities

Option One

• Copy the module to /site/modules/InputfieldPageTable/
• ProcessWire will ask which version of the module to use, select yours
• Modify renderTableRow() as needed.
• You'll need JavaScript to help with the cloning (?).

Option Two

• Hook after renderTable().
• Grab the return string.
• Use regex to inject your markup.
• You'll need JavaScript to help with the cloning.

Option Three

• A pure JavaScript solution to inject your markup.
• You will need ajax to create the pagetable item (a page).

Just my 2p.

[Orkun]

On 11/26/2020 at 6:02 AM, kongondo said:

Three possibilities

Option One

• Copy the module to /site/modules/InputfieldPageTable/
• ProcessWire will ask which version of the module to use, select yours
• Modify renderTableRow() as needed.
• You'll need JavaScript to help with the cloning (?).

Option Two

• Hook after renderTable().
• Grab the return string.
• Use regex to inject your markup.
• You'll need JavaScript to help with the cloning.

Option Three

• A pure JavaScript solution to inject your markup.
• You will need ajax to create the pagetable item (a page).

Just my 2p.

Hi @kongondo

Thanks for your answer! I have also another Question. If I have set a specific parent page (where the pagetable items are stored) for the pagetable field.
This means the items aren't saved as children of the page where the pagetable field lives.
How do I need to setup the clone URL, so that it also gets automatically added into the pagetable table, is that even possible?

I mean the normal clone url would look like this: ..../processwire/page/?action=clone&id=xxxx
But that would just clone the page without the connection to the pagetable field am I right?

KR
Orkun


 

[kongondo]

2 hours ago, Orkun said:

How do I need to setup the clone URL, so that it also gets automatically added into the pagetable table, is that even possible?

If using the API, you can get it like this. There are probably other (better) ways.

<?php namespace ProcessWire;

$myPageTableField = $fields->get('your_page_table_field_name');
$myPageTableFieldParentID = $myPageTableField->get('parent_id');

Alternatively, if you have to, you can also get it from the markup wrapping the 'Add New' Button:

<span class="InputfieldPageTableAdd"
      data-url="/hooks/page/add/?modal=1&template_id=29&parent_id=1056&context=PageTable">
  <button
          class="ui-button ui-widget ui-corner-all ui-state-active ui-state-default" name="button" value="Add New"
          type="button">
    <span class="ui-button-text"><i class="fa fa-plus-circle"></i> Add New</span>
  </button>
</span>

 

[Orkun]

12 hours ago, kongondo said:

If using the API, you can get it like this. There are probably other (better) ways.

<?php namespace ProcessWire;

$myPageTableField = $fields->get('your_page_table_field_name');
$myPageTableFieldParentID = $myPageTableField->get('parent_id');

Alternatively, if you have to, you can also get it from the markup wrapping the 'Add New' Button:

<span class="InputfieldPageTableAdd"
      data-url="/hooks/page/add/?modal=1&template_id=29&parent_id=1056&context=PageTable">
  <button
          class="ui-button ui-widget ui-corner-all ui-state-active ui-state-default" name="button" value="Add New"
          type="button">
    <span class="ui-button-text"><i class="fa fa-plus-circle"></i> Add New</span>
  </button>
</span>

 

Hi @kongondo

Sorry but I don't quite understand for what I should need the parent_id when I would clone the items pages with /processwire/page/clone/?id=xxxx

Shouldn't the url above already clone the corresponding page in the right place?

What I meant is, when I would clone such a page it wont be added to the pagetable table here (see screenshot) and that is what I am trying to achieve.

KR
Orkun


 

[kongondo]

6 minutes ago, Orkun said:

Sorry but I don't quite understand for what I should need the parent_id when I would clone the items pages with /processwire/page/clone/?id=xxxx

Let's back up a bit. How are you cloning the page? 

[Orkun]

@kongondo

My idea was to add a Hook to renderTable() where I use str_replace() to replace this part of the return string:

<td><a class="InputfieldPageTableDelete" href="#"><i class="fa fa-trash-o"></i></a></td>

with: 

<td><a class="InputfieldPageTableDelete" href="#"><i class="fa fa-trash-o"></i></a></td>
<td><a target="_blank" class="InputfieldPageTableCopy" href="/processwire/page/clone/?id=xxxx"><i class="fa fa-clone"></i></a></td>

And then also add a little bit of JS to replace the "xxxx" part with the right Item/Page ID by looping through the items.
I would get the ID from the parent HTML tag (<tr>) where it is placed as a data attribute:

<tr data-id="2133">
  <td>
    <a class="InputfieldPageTableEdit" data-url="/processwire/page/edit/?id=2133&modal=1&context=PageTable" href="#">
      <i class="fa fa-edit"></i>
    </a>
  </td>
  <td><a class="InputfieldPageTableEdit" data-url="/processwire/page/edit/?id=2133&modal=1&context=PageTable" href="#">News</a></td>
  <td>News Teaser</td>
  
  <td>
    <a class="InputfieldPageTableDelete" href="#"><i class="fa fa-trash-o"></i></a>
  </td>
  
</tr>

When I would click on one of these "new" clone urls it would open up a new window with the rendered clone form where you can submit it to clone the corresponding page.

But this way the new cloned page won't be added to the pagetable.

KR
Orkun

 

[kongondo]

38 minutes ago, Orkun said:

When I would click on one of these "new" clone urls it would open up a new window with the rendered clone form where you can submit it to clone the corresponding page.

This is the important part for me. What exactly happens here? How are you cloning the page? Could you show us some code? It is here you might need to tell ProcessWire the parent page, hence the parent_id.

[Orkun]

5 minutes ago, kongondo said:

This is the important part for me. What exactly happens here? How are you cloning the page? Could you show us some code? It is here you might need to tell ProcessWire the parent page, hence the parent_id.

@kongondo

The Form is rendered by the ProcessPageClone Module, this is natively and I haven't created the form or the logic behind it. It was already there.

[kongondo]

35 minutes ago, Orkun said:

The Form is rendered by the ProcessPageClone Module, this is natively and I haven't created the form or the logic behind it. It was already there.

I get you now. I have never used that module before, hence the reason I didn't recognise the /clone/ url. Let me install the module, have a play and get back to you.

[kongondo]

@Orkun,

I have looked at the ProcessPageClone code and it should clone to the correct parent of PageTable Items. Did you try it? Looking at this code (where the page is cloned) found here:

<?php namespace ProcessWire;

$clone = $this->pages->clone($page, $page->parent, $cloneTree);

You can see ProcessWire will preserve the parent of the page being cloned. Since you are cloning a PageTable item (which is a page), ProcessWire knows and will keep its parent (i.e., in your example, the parent page of PageTable items, with the ID 2133).

[Orkun]

20 minutes ago, kongondo said:

@Orkun,

I have looked at the ProcessPageClone code and it should clone to the correct parent of PageTable Items. Did you try it? Looking at this code (where the page is cloned) found here:

<?php namespace ProcessWire;

$clone = $this->pages->clone($page, $page->parent, $cloneTree);

You can see ProcessWire will preserve the parent of the page being cloned. Since you are cloning a PageTable item (which is a page), ProcessWire knows and will keep its parent (i.e., in your example, the parent page of PageTable items, with the ID 2133).

@kongondo

I know that the page will be cloned to the right parent. But what I am trying to achieve is, that the cloned item should appear in the pagetable table itself (see screenshot).
There is no real connection between the pagetable field and the pagetable item.


 

[kongondo]

51 minutes ago, Orkun said:

But what I am trying to achieve is, that the cloned item should appear in the pagetable table itself (see screenshot).
There is no real connection between the pagetable field and the pagetable item.

I now get you, fully. What you need is to add the page to the page table field. You need to add it like you would an item to a PageArray or WireArray. Something like this:

<?php namespace ProcessWire;

$pageWithPageTableField = $pages->get(1055); // page with the page table field you're adding the new (cloned) item to
// $clonedPageTableItem = $pages->get(1059);
// can add as ID as well
$clonedPageTableItemID = 1059;
$pageWithPageTableField->of(false);
//$pageWithPageTableField->your_page_table_field_name->add($clonedPageTableItem);
// @note: here you can first check if this page table field already has this item and skip in that case, just to be sure
$pageWithPageTableField->your_page_table_field_name->add($clonedPageTableItemID);
$pageWithPageTableField->save('your_page_table_field_name');

You will need to hook somewhere and this has to be after your page has been cloned. Maybe try hooking AFTER pages:cloned? You will need access to the IDs 1055 (page with the PageTable field) and 1059 (cloned page for used as PageTable item) in my example.

[kongondo]

Quick question, why are you cloning the pages? What properties/fields of the cloned page will you want to keep and which ones will you want to edit? I suppose you might want to edit to change the title (and possibly name) of the cloned item. The reason I am asking is that IMO, for your specific use case, I don't think the ProcessPageClone GUI/form is very user friendly (?). Won't questions/information about a new page being created/cloned be confusing to your editors? Secondly, how do you intend to reload the page after the clone is finished? I am thinking maybe that a minimal custom form with say, only an input for the title for the incoming/new page table item should suffice? You would then process the form via ajax, close the modal and append details of the newly created item to the PageTable table without reloading the page. You would obviously need an endpoint to process the form, clone the page and create a new Page Table item. 

Just some thoughts. I don't know the whole context so my ideas may not be feasible ?.