Jump to content
James F Carr

How to Pass Data to Modal Edit Windows

Recommended Posts

In the admin, I am trying to access data from a page that contains an inputfieldand autofill that data into the modal edit window for a new entry.

For instance, I have a template which contains a PageTable field. When I add a new entry to the PageTable, I want to capture the ID from the originating admin page and add it to a field in the edit modal as a way of linking the new entry back to the originating page. The new PageTable entries are NOT children of the originating page, and cannot be for structural reasons. I have attached an image which I hope will help to clarify the basic result I want to achieve.

Is there a practical means of accomplishing this? I've been able to achieve something similar with the ConnectPageFields module, but it does not work with PageTable fields. Any input would be much appreciated.

Screen_Shot_2017-11-29_at_8_40_37_AM.png

Share this post


Link to post
Share on other sites

it has been discussed a lot on some topics, and it was determined that there is currently no easy way to pass data to the modal/page.

One way to achieve it is to hook into the save of the owning page and at that point cycle through the items in the page table, setting that field to the owning page. This works fine, however is risky in case the users do not save the owning page after adding new items to the page table. You could optionally also run a cron job to scan though the pages and look for items missing that field and set them that way.

Another way I have achieved this by using a custom 'page table' which i create using @kongondo's Runtime Markup, then i can put anything i want in the add new button (url params); Then i capture the input into a session variable, use that to set the field, then clear the session variable, hooking into save of the new item.

To do it in a Page Table without doing the first way i suggested here and in the linked topic, i think you'd likely need to add a url parameter to the popup which means hooking into the button markup. This is the structure of the add new button:

<a class="InputfieldPageTableEdit" data-url="/manage/page/edit/?id=9999&modal=1&context=PageTable" href="#">Title of Page</a>

if you could add a url param, like &ownerPage=1234 you could then capture the input and use it to set the field. You'd need to have a hook on the save of the new page;

I may be working on this so if i come up with a definitive solution will post back; i do think this is something that should have a decent recipe solution since it seems to come up often in my IA requirements.

  • Like 2

Share this post


Link to post
Share on other sites

@Macrura, thanks for the quick and thorough response. I'd been searching the forums for quite a while, yet had apparently failed to find the proper search phrasing.

I can always provide an option to select the originating page with a dropdown or autocomplete, it's just not efficient from a UX perspective and provides additional opportunity for input errors. It might just be something I have to work around during the development process until I can find a more elegant solution.

Share this post


Link to post
Share on other sites

i do have a client with a pretty big site where i do the cycle through the pages and set the owning page on those page table items;

but now i have to add a cron job to set them because the client keeps forgetting to save the owning page

and then even though those page table items are connected to the owning page by their existence in the page table field, they are still 'orphans' in the sense that the front end code we use needs to be able to identify any of those page table items' owning page without having to do a lookup;

part of the reason is that this site was built before Page Table was invented;

otherwise i think this method is the most reliable and easiest, here is some example code:

if($page->template == 'class') {
	$sessionsUnset = $page->session_table->find("class=");
	foreach($sessionsUnset as $su) {
		$su->class = $page;
		$su->setOutputFormatting(false);
		$su->save();
		$this->message("This class ({$page->title}) added to session {$su->id}");    
	}
}

 

  • Like 1

Share this post


Link to post
Share on other sites

Despite Soma helpfully telling us we are all wrong, the code I suggested in that thread works for me:

So you set up a field in each PageTable template to hold some reference to the container page - in the example below I use an integer field for the page ID, but you could use a Page Reference field instead. You would set the field to hidden so users do not see or change it. But for demonstration purposes I have left the field visible and also show the value in the PageTable columns.

Note that the value is only set when the PageTable field does the AJAX reload (when the modal closes), so the value is not available when adding a new page to the PageTable until the modal is closed.

In /site/init.php

$wire->addHookBefore('InputfieldPageTableAjax::checkAjax', function($event) {
    $field_name = $this->input->get('InputfieldPageTableField');
    // Just for this PageTable field
    if($field_name !== 'test_pagetable') return;
    $page_id = (int) $this->input->get('id');
    $item_id = (int) $this->input->get('InputfieldPageTableAdd');
    if($page_id) $page = $this->pages->get($page_id); // $page is the container page
    if($item_id) $item = $this->pages->get($item_id); // $item is the PageTable item
    // Set integer field to $page->id
    $item->setAndSave('container_page_id', $page->id);
});

pt.gif.762983e642960cd3595f9d7501b0a058.gif

  • Like 6

Share this post


Link to post
Share on other sites

@Robin S. Excellent solution! I think it is worth mentioning in the other thread that the solution does work (and cross-reference it with this GIF)...to help those who come across that thread. Ta.

  • Like 3

Share this post


Link to post
Share on other sites

this is amazing, wish i saw this about 2 hrs ago (before i wasted a bunch of time trying it another way...)

  • Like 1

Share this post


Link to post
Share on other sites

I'm not sure what was the point exactly. It works, but I need the id the moment I created the page table page not after saving it.

  • Like 1

Share this post


Link to post
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 Chris Bennett
      Hi all, I am going round and round in circles and would greatly appreciate if anyone can point me in the right direction.
      I am sure I am doing something dumb, or missing something I should know, but don't. Story of my life 😉

      Playing round with a module and my basic problem is I want to upload an image and also use InputfieldMarkup and other Inputfields.
      Going back and forth between trying an api generated page defining Fieldgroup, Template, Fields, Page and the InputfieldWrapper method.

      InputfieldWrapper method works great for all the markup stuff, but I just can't wrap my head around what I need to do to save the image to the database.
      Can generate a Field for it (thanks to the api investigations) but not sure what I need to do to link the Inputfield to that. Tried a lot of stuff from various threads, of varying dates without luck.
      Undoubtedly not helped by me not knowing enough.

      Defining Fieldgroup etc through the api seems nice and clean and works great for the images but I can't wrap my head around how/if I can add/append/hook the InputfieldWrapper/InputfieldMarkup stuff I'd like to include on that template as well. Not even sure if it should be where it is on ___install with the Fieldtype stuff or later on . Not getting Tracy errors, just nothing seems to happen.
      If anyone has any ideas or can point me in the right direction, that would be great because at the moment I am stumbling round in the dark.
       
      public function ___install() { parent::___install(); $page = $this->pages->get('name='.self::PAGE_NAME); if (!$page->id) { // Create fieldgroup, template, fields and page // Create new fieldgroup $fmFieldgroup = new Fieldgroup(); $fmFieldgroup->name = MODULE_NAME.'-fieldgroup'; $fmFieldgroup->add($this->fields->get('title')); // needed title field $fmFieldgroup->save(); // Create new template using the fieldgroup $fmTemplate = new Template(); $fmTemplate->name = MODULE_NAME; $fmTemplate->fieldgroup = $fmFieldgroup; $fmTemplate->noSettings = 1; $fmTemplate->noChildren = 1; $fmTemplate->allowNewPages = 0; $fmTemplate->tabContent = MODULE_NAME; $fmTemplate->noChangeTemplate = 1; $fmTemplate->setIcon(ICON); $fmTemplate->save(); // Favicon source $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeImage"); $fmField->name = 'fmFavicon'; $fmField->label = 'Favicon'; $fmField->focusMode = 'off'; $fmField->gridMode = 'grid'; $fmField->extensions = 'svg png'; $fmField->columnWidth = 50; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon(ICON); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($fmField); // Favicon Silhouette source $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeImage"); $fmField->name = 'fmFaviconSilhouette'; $fmField->label = 'SVG Silhouette'; $fmField->notes = 'When creating a silhouette/mask svg version for Safari Pinned Tabs and Windows Tiles, we recommend setting your viewbox for 0 0 16 16, as this is what Apple requires. In many cases, the easiest way to do this in something like illustrator is a sacrificial rectangle with no fill, and no stroke at 16 x 16. This forces the desired viewbox and can then be discarded easily using something as simple as notepad. Easy is good, especially when you get the result you want without a lot of hassle.'; $fmField->focusMode = 'off'; $fmField->extensions = 'svg'; $fmField->columnWidth = 50; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon(ICON); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($fmField); // Create: Open Settings Tab $tabOpener = new Field(); $tabOpener->type = new FieldtypeFieldsetTabOpen(); $tabOpener->name = 'fmTab1'; $tabOpener->label = "Favicon Settings"; $tabOpener->collapsed = Inputfield::collapsedNever; $tabOpener->addTag(MODULE_NAME); $tabOpener->save(); // Create: Close Settings Tab $tabCloser = new Field(); $tabCloser->type = new FieldtypeFieldsetClose; $tabCloser->name = 'fmTab1' . FieldtypeFieldsetTabOpen::fieldsetCloseIdentifier; $tabCloser->label = "Close open tab"; $tabCloser->addTag(MODULE_NAME); $tabCloser->save(); // Create: Opens wrapper for Favicon Folder Name $filesOpener = new Field(); $filesOpener->type = new FieldtypeFieldsetOpen(); $filesOpener->name = 'fmOpenFolderName'; $filesOpener->label = 'Wrap Folder Name'; $filesOpener->class = 'inline'; $filesOpener->collapsed = Inputfield::collapsedNever; $filesOpener->addTag(MODULE_NAME); $filesOpener->save(); // Create: Close wrapper for Favicon Folder Name $filesCloser = new Field(); $filesCloser->type = new FieldtypeFieldsetClose(); $filesCloser->name = 'fmOpenFolderName' . FieldtypeFieldsetOpen::fieldsetCloseIdentifier; $filesCloser->label = "Close open fieldset"; $filesCloser->addTag(MODULE_NAME); $filesCloser->save(); // Create Favicon Folder Name $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeText"); $fmField->name = 'folderName'; $fmField->label = 'Favicon Folder:'; $fmField->description = $this->config->urls->files; $fmField->placeholder = 'Destination Folder for your generated favicons, webmanifest and browserconfig'; $fmField->columnWidth = 100; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon('folder'); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($tabOpener); $fmFieldgroup->add($filesOpener); $fmFieldgroup->add($fmField); $fmFieldgroup->add($filesCloser); $fmFieldgroup->add($tabCloser); $fmFieldgroup->save(); /////////////////////////////////////////////////////////////// // Experimental Markup Tests $wrapperFaviconMagic = new InputfieldWrapper(); $wrapperFaviconMagic->attr('id','faviconMagicWrapper'); $wrapperFaviconMagic->attr('title',$this->_('Favicon Magic')); // field show info what $field = $this->modules->get('InputfieldMarkup'); $field->name = 'use'; $field->label = __('How do I use it?'); $field->collapsed = Inputfield::collapsedNever; $field->icon('info'); $field->attr('value', 'Does this even begin to vaguely work?'); $field->columnWidth = 50; $wrapperFaviconMagic->add($field); $fmTemplate->fields->add($wrapperFaviconMagic); $fmTemplate->fields->save(); ///////////////////////////////////////////////////////////// // Create page $page = $this->wire( new Page() ); $page->template = MODULE_NAME; $page->parent = $this->wire('pages')->get('/'); $page->addStatus(Page::statusHidden); $page->title = 'Favicons'; $page->name = self::PAGE_NAME; $page->process = $this; $page->save(); } }  
    • By marcus
      wireshell 1.0.0 is out    
      See Bea's post
       


      -------- Original post -----------
        Now this one could be a rather long post about only an experimental niche tool, but maybe a helpful one for some, so stay with me   Intention Do you guys know "Artisan" (Laravel) or "Drush" (Drupal)? If not: These are command line companions for said systems, and very useful for running certain (e.g. maintenance, installation) task quickly - without having to use the Admin Interface, first and foremost when dealing with local ProcessWire installations. And since it has a powerful API and an easy way of being bootstrapped into CLIs like this, I think such a tool has a certain potential in the PW universe.    It's totally not the first approach of this kind. But: this one should be easily extendable - and is based on PHP (specifically: the Console component of the Symfony Framework). Every command is tidily wrapped in its own class, dependencies are clearly visible, and so on.   ( Here was the outdated documentation. Please visit wireshell.pw for the current one )
    • By jploch
      Hey folks,
      I have a question regarding rendering of template files that are in a subfolder of the template folder.
      How would I for example render these PageTable items, when their template files are inside templates/blocks/:
      <div class="grid"> <?php foreach($page->grid_ext as $item): ?> <div id="pteg_<?= $item->id ?>"> <?php echo $item->render(); ?> </div> <?php endforeach; ?> </div> I tried this, but get an error:
      <?php echo $item->render(wire('config')->paths->templates . '/blocks/'); ?>  
    • By codevark
      The Minimal Site works fine, but if I try to login as admin, I have no idea what the credentials are.
      I did not do the "install" process myself. The OVA came with everything set up, but there's no mention of the PW admin credentials being set to some initial value.
      Wondering if anyone else has tried the Bitnami OVA and if there's a simple answer.
      --Pete
    • By vwatson
      I don't have any fontawesome icons in the admin section. Not sure what's wrong. They used to appear. I've tried all the user profiles and they're gone in all of them.
      Using the browser inspector tool, I see this message:
      Access to font at 'https://www.domain.com/wire/templates-admin/styles/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0' from origin 'http://domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
      I'm not sure why this is occurring or how to fix it. Any help would be greatly appreciated. 
×
×
  • Create New...