kongondo

Module: RuntimeMarkup Fieldtype & Inputfield

Recommended Posts

@kongondo - thanks - yes, i could also just delete and remake the field, since i can copy the code, and there is no risk of losing entered data...

it would be good to fix though, as surely someone along the way is going to try and rename one of these..

Share this post


Link to post
Share on other sites

 In relation to lister -

So i have this module generating a dynamic link (the link is based off the combination of a page select and some attributes of the page being edited); to get it to work in lister, e.g. where it doesn't end up getting entity encoded, i added this to ready.php:

wire()->addHookAfter('FieldtypeRuntimeMarkup::markupValue', function($event) {
  $value = $event->arguments('value');
  $event->return = $value;
});

should the module assume that the output will be markup and therefore also provide a markupValue by default, or leave this up to the user to add as a hook?

  • Like 1

Share this post


Link to post
Share on other sites

 In relation to lister -

....should the module assume that the output will be markup and therefore also provide a markupValue by default, or leave this up to the user to add as a hook?

Thanks. Good idea. Will provide the method.

Share this post


Link to post
Share on other sites

@kongondo - thanks - yes, i could also just delete and remake the field, since i can copy the code, and there is no risk of losing entered data...

it would be good to fix though, as surely someone along the way is going to try and rename one of these..

@Macrura,

Reported the issue and Ryan fixed it in this commit. I've tested it and it works.

Share this post


Link to post
Share on other sites

Update: version 0.0.2

As requested by @Macrura, added a markupValue() method to correctly output the field's markup output in listers.

  • Like 3

Share this post


Link to post
Share on other sites

awesome, many thanks for this!

will be upgrading mods tomorrow...

Share this post


Link to post
Share on other sites

How can I have the button open a url in a modal? I can't quite get it to work. The modal does appear but then the browser goes to the url.

$url = 'http://example.com';
$out = '<a href="'.$url.'" class="pw-modal pw-modal-large" data-buttons="#non_rte_dialog_buttons button" data-autoclose="1" data-close="#non_rte_cancel">';
$out .= '<button type="button" name="button" class="ui-button ui-widget ui-corner-all ui-state-default">';
$out .= '<span class="ui-button-text">Image Archive</span></button>';
$out .= '</a>';
return "<div class='pfabLink'>".$out."</div>";

Thanks

Share this post


Link to post
Share on other sites

It should work (@adrian) but for some reason the modal quickly closes, so something on PW side doing that. Maybe @adrian used fancybox or something else and you are calling modal.js? I have no idea really.

@adrian, thoughts? Thanks.

Edited by kongondo

Share this post


Link to post
Share on other sites

The page has image field's thumbnail images which use modal and have those "pw-modal" classes and work just fine, so any necessary js and css are in place already. I'd seen that Adrian comment so I know it can be done.

I'm new to jqueryUI so I don't understand the handling of the click event and at what point it does something (return false?) to stop the browser from processing the link as a link and going off to another page. There must be some condition which isn't being met. Could it be a matter of what the A tag is wrapped in?

Answer: Don't use an A tag! Seems simple enough. Just do it all with the button, putting the url in a "data-href" attribute on the button. It's working now.

Drifting off topic but any tips on how best to generate the boilerplate page markup for this iframe so that admin theme styling for an AdminDataTable works. I'm about halfway there.

  • Like 1

Share this post


Link to post
Share on other sites

Hey guys - I actually removed that popup link I was using - not because it didn't work great with RuntimeMarkup, but for other reasons - anyway, I don't have the code I used for it anymore.

But, this works for me:

$url = 'http://www.example.com';
$out = '<button data-href="'.$url.'" type="button" name="button" class="pw-modal pw-modal-large ui-button ui-widget ui-corner-all ui-state-default">';
$out .= '<span class="ui-button-text">Image Archive</span></button>';
return "<div class='pfabLink'>".$out."</div>";
  • Like 1

Share this post


Link to post
Share on other sites

Yup, working for me too. The only wierdness left has to do with button color. Using the default admin theme it's green and turns sort of purple after being clicked to launch the modal. It stays that color after the modal is closed and that seems wrong.

Share this post


Link to post
Share on other sites

Yeah, it needs to be refreshed (the button, i.e.)...

You can use JS for that. Which reminds me, This module comes with an empty InputfieldRuntimeMarkup.js...in which I foolishly state: 

/*Use this file for scripts (js) for your renderend Markup in the page edit in admin, i.e. in the rendered InputfieldRuntimeMarkup*/

...as if those wouldn't be overwritten on the next upgrade, grrr!

Anyway, I will either let the module check for and if found include an 'InputfieldRuntimeMarkupCustom.js', which won't get overwritten on upgrades, or simply, I will ship the module  without a  'InputfieldRuntimeMarkup.js' (and without a  'InputfieldRuntimeMarkup.css' as well). In that case, PW will autoload those files if found and they'll never get overwritten.

So, to your solution. Add the following to your 'InputfieldRuntimeMarkup.js': @note: I added an id="archives" to your button

$(document).ready(function(){
  $('button#archives').on('click', function(){
  //refresh button (remove 'ui-state-active') (only needed for default theme)
  $(this).button().button('refresh');
 });
})

The code could probably be optimized to only run if default admin theme is in use. Maybe could even be used inline but this is cleaner. Maybe there's better solutions as well. The blue (on Chrome) outline around the button can be removed using CSS.

Edited by kongondo
  • Like 1

Share this post


Link to post
Share on other sites

Nice! I didn't know about button('refresh'). That works perfectly. Thanks so much for the module too.

I'll be posting something about this "archive" pretty soon in Module/Plugin Development.

Share this post


Link to post
Share on other sites

ok, adding buttons is easy and helpful. can someone help me out when i want to add input fields as well?

usecase is a simple form with one inputfield and one button to copy a page and save it with the name specified in the textfield.

i was able to display the field + button but i was not able to get the data of the field. my $input->post was empty all the time. i tried it like this:

return wireRenderFile('markup/_createcustomcopy');
<?php
$field = $modules->get("InputfieldText");
$field->label = "Name";
$field->attr('id+name','name');
$field->required = 1;
echo $field->render(); // append the field to the form

// oh a submit button!
$submit = $modules->get("InputfieldSubmit");
$submit->attr("value","create copy");
$submit->attr("id+name","createcustomcopy");
echo $submit->render();

echo print_r($input->post, true);

post-2137-0-23494800-1456317817_thumb.pn

i hope someone can point me in the right direction :)

Share this post


Link to post
Share on other sites

I don't share the warm fuzzy feelings I get when I use people's modules nearly often enough, so I just left a comment on the module directory page.

The short version is that it's saving me from having to create custom modules for a lot of places where I'd want to output some custom, processed output when editing a page and it is streamlining some of the steps I need to perform when approving entries in the dev directory, so thanks for this!

  • Like 6

Share this post


Link to post
Share on other sites

@BernhardB,

You should be getting a couple of errors with that code (if you have debug on). In that context, PW doesn't know what $modules and $input are (see similar issues on page 1 of this thread). You need to use $this-> or wire('modules'). Secondly, the module will only return a string or integer. You need to save string/integer output in a variable (e.g. $out) and return $out;

Share this post


Link to post
Share on other sites

hi kongondo,

sorry, it seems i was not clear enough.

in the markup field settings i have

return wireRenderFile(...);

and in this file i have code like this

<?php
// some code here
$out .= 'xxx';
$out .= 'yyy';

echo $out;

so i think at least this should not be a problem as i am only returning a string of html. i was also confused why $modules was available in the file from wireRenderFile() but i guess it has something to do with that method. but to be honest i did not investigate that further.

Share this post


Link to post
Share on other sites

Aah, I see. That's a cool usage of the module you got there! ^-^. Using wireRenderFile() keeps the module's input clean, circumvents limit of text allowed in that field plus makes the module much more versatile. One can do all sorts of flexible includes from within the file rendered by wireRenderFile(), depending on the context. :)

I have tested and it works fine here creating a new page (see below). Cloning a page on the other hand leads to a cyclical error (or memory issue) and crashes Apache. 

In details tab of this module I have:

return wireRenderFile('test');

In /site/templates/test.php

$out ='';

$f = $modules->get("InputfieldText");
$f->label = "Copy Title";// @note: doesn't seem to work
$f->attr('id+name','name');
$f->required = 1;// @note: -ditto-
$out= $f->render(); // append the field to the form

// oh a submit button!
$f = $modules->get("InputfieldSubmit");
$f->attr("value","Create Copy");
$f->attr("id+name","createcustomcopy");
$out .= $f->render();

$currentPage = '';
$process = wire('process'); 
if($process && $process->className() == 'ProcessPageEdit') $currentPage = $process->getPage();
if(!$currentPage) return;

echo $out;

// let's create a copy
$copy = $input->post->createcustomcopy;
$title = $sanitizer->text($input->post->name);

if($copy) {

   if(!$title) {
     $this->error('You need to specify a title for the copied page!');
     return;
   }

   $p = new Page();
   $p->template = $templates->get($currentPage->template);
   $p->parent = $currentPage->parent;

   $p->title = $title;
   //sanitize and convert to a URL friendly page name
   $p->name = $sanitizer->pageName($p->title);

   //check if name already taken within same parent. if the same name exist, don't create a new copy
   //  @note; without this line pages were being created in duplicates
   if($p->parent->child("name={$p->name}, include=all")->id) return;
   else { 
       $p->save();
       $this->message('Created a copy of the page with the title: ' . $title);
   }
}
Edited by kongondo
  • Like 2

Share this post


Link to post
Share on other sites

Following up on my post above...Say you wanted to embed a YouTube video...for whatever reason...in the page edit context..

<iframe width="420" height="315"
src="https://www.youtube.com/embed/Bohhf3aK8gU" frameborder="0" allowfullscreen>
</iframe>

That's it!

  • Like 1

Share this post


Link to post
Share on other sites

that is awesome!!!! exactly what i wanted, thank you very much :)

Aah, I see. That's a cool usage of the module you got there! ^-^. Using wireRenderFile() keeps the module's input clean, circumvents limit of text allowed in that field plus makes the module much more versatile. One can do all sorts of flexible includes from within the file rendered by wireRenderFile(), depending on the context. :)

yes, i'm a huge fan of wirerenderfile :)

what do you think of having your module render a file with the name of the field by default?

field "examplefield" would render /site/assets/FieldtypeRuntimeMarkup/examplefield.php
field "examplefield2" would render /site/assets/FieldtypeRuntimeMarkup/examplefield2.php

Share this post


Link to post
Share on other sites

So, I tried to use RuntimeMarkup in my RepeaterMatrix and $page refers to the page that the repeater is on. I have placed the RuntimeMarkup field inside repeater entries and therefore, I can't see a way to get a reference to the Page field in the "current" repeater entry. Basically, if I can get a reference to the Page field each time it appears in the repeater, I can simply reference the field value is want from (Template2/Page2) straight from the Page field.

Thanks.

Share this post


Link to post
Share on other sites

I haven't tried this in a repeater...yet. so would have to do that before I can give an answer...unless someone beats me to it?

Share this post


Link to post
Share on other sites

@Gazley,

I don't think this is possible out of the box. Have a read here at a similar question:

https://processwire.com/talk/topic/8962-selectable-pages-defined-dynamically-for-page-field-in-repeater/

What you want is a way to get the current repeater item, basically the nth repeater. I haven't seen any way to do that without looping through all repeaters  - which wont be very efficient.

If your page field is a single page field, using a select, maybe we could use jQuery Ajax to dynamically send the id of the selected page to some template file which would then grab whatever it is you want from template 2, return that as JSON and dynamically add the markup next to the page field. I'm not sure, in your case, whether it's worth the effort going down that route.

Edited by kongondo

Share this post


Link to post
Share on other sites

Btw, above answer refers to normal repeaters. I haven't used repeater matrix before. I am wondering whether, unlike normal repeaters, will be able to give you a 'current repeater item' variable. Anybody knows? Haven't got time to test atm.

Share this post


Link to post
Share on other sites

working the first time with repeater matrix today and it is totally awesome!!

repeater items are just normal pages and you have all you need there:

current repeater-item available under $page variable;

field in your repeater-item-type = $page->yourfield;

current page, where your repeater matrix lives on = $page->getForPage();

don't know how that plays together with your module - i'm quite busy right now :)

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 Mike Rockett
      As I mentioned in this issue, I've create a new textformatter for ParsedownExtraPlugin, which adds some oomph to your markdown.
      Repo: Parsedown Extra Plugin
      Unlike the built-in textformatter for Parsedown and Parsedown Extra, this should be used when you want to use Extra with additional configuration/customisation.
      Some examples:
      ### Test {.heading} - A [external link](https://google.com/){.google} with `google` as a class that opens in a new tab if the config property is set. - [Another link](/page){target=_blank} that opens in a new tab even though it isn't external. ```html .html <p>Test</p> ``` There's some config options available to you, such as setting attributes on all/external images and links, setting table and table-cell alignment classes, adjusting footnote classes and IDs, adding <code> attributes to their parent <pre> elements, and changing the <code> class if your syntax highlighter does not use language-*.
      I was thinking about adding the ability to make links open in a new tab by appending a plus to the link syntax, but only external links should be opening in a new tab anyway. Further, this would add extra, unnecessary processing time.
      Please let me know if you bump into any problems. ☺️
    • By Mike Rockett
      TextformatterTypographer (0.4.0 Beta)
      A ProcessWire wrapper for the awesome PHP Typography class, originally authored by KINGdesk LLC and enhanced by Peter Putzer in wp-Typography. Like Smartypants, it supercharges text fields with enhanced typography and typesetting, such as smart quotations, hyphenation in 59 languages, ellipses, copyright-, trade-, and service-marks, math symbols, and more.
      Learn more on my blog
      It's based on the PHP-Typography library found over at wp-Typography, which is more frequently updated and feature rich that its original by KINGdesk LLC.
      The module itself is fully configurable. I haven't done extensive testing, but there is nothing complex about this, and so I only envisage a typographical bug here and there, if any.
      Please do test it out and let me know what you think.
      Also note that I have indicated support for PW 2.8, but I haven't tested there as yet. This was built on PW 3.0.42/62.
    • By Mike Rockett
      Jumplinks for ProcessWire
      Release: 1.5.50
      Jumplinks is an enhanced version of the original ProcessRedirects by Antti Peisa.
      The Process module manages your permanent and temporary redirects (we'll call these "jumplinks" from now on, unless in reference to redirects from another module), useful for when you're migrating over to ProcessWire from another system/platform. Each jumplink supports wildcards, shortening the time needed to create them.
      Unlike similar modules for other platforms, wildcards in Jumplinks are much easier to work with, as Regular Expressions are not fully exposed. Instead, parameters wrapped in curly braces are used - these are described in the documentation.
      Under Development: 2.0, to be powered by FastRoute
      As of version 1.5.0, Jumplinks requires at least ProcessWire 2.6.1 to run.
      View on GitLab
      Download via the Modules Directory
      Read the docs
      Features
      The most prominent features include:
      Basic jumplinks (from one fixed route to another) Parameter-based wildcards with "Smart" equivalents Mapping Collections (for converting ID-based routes to their named-equivalents without the need to create multiple jumplinks) Destination Selectors (for finding and redirecting to pages containing legacy location information) Timed Activation (activate and/or deactivate jumplinks at specific times) 404-Monitor (for creating jumplinks based on 404 hits) Additionally, the following features may come in handy:
      Stale jumplink management Legacy domain support for slow migrations An importer (from CSV or ProcessRedirects) Feedback & Feature Requests
      I’d love to know what you think of this module. Please provide some feedback on the module as a whole, or even regarding smaller things that make it whole. Also, please feel free to submit feature requests and their use-cases.
      Note: Features requested so far have been added to the to-do list, and will be added to 2.0, and not the current dev/master branches.
      Open Source

      Jumplinks is an open-source project, and is free to use. In fact, Jumplinks will always be open-source, and will always remain free to use. Forever. If you would like to support the development of Jumplinks, please consider making a small donation via PayPal.
      Enjoy! 
    • By bernhard
      Some of you might have followed the development of this module here: https://processwire.com/talk/topic/15524-previewdiscussion-rockdatatables/ . It is the successor of "RockDataTables" and requires RockFinder to get the data for the grid easily and efficiently. It uses the open source part of agGrid for grid rendering.
       
      WHY?
      ProcessWire is awesome for creating all kinds of custom backend applications, but where it is not so awesome in my opinion is when it comes to listing this data. Of course we have the built in page lister and we have ListerPro, but none of that solutions is capable of properly displaying large amounts of data, for example lists of revenues, aggregations, quick and easy sorts by the user, instant filter and those kind of features. RockGrid to the rescue 😉 
       
      Features/Highlights:
      100k+ rows Instant (client side) filter, search, sort (different sort based on data type, eg "lower/greater than" for numbers, "contains" for strings) extendable via plugins (available plugins at the moment: fullscreen, csv export, reload, batch-processing of data, column sum/statistics, row selection) all the agGrid features (cell renderers, cell styling, pagination, column grouping etc) vanilla javascript, backend and frontend support (though not all plugins are working on the frontend yet and I don't plan to support it as long as I don't need it myself)  
      Limitations:
      While there is an option to retrieve data via AJAX the actual processing of the grid (displaying, filtering, sorting) is done on the client side, meaning that you can get into troubles when handling really large datasets of several thousands of rows. agGrid should be one of the most performant grid options in the world (see the official example page with a 100k row example) and does a lot to prevent problems (such as virtual row rendering), but you should always have this limitation in mind as this is a major difference to the available lister options that do not have this limitation.
      Currently it only supports AdminThemeUikit and I don't plan to support any other admin theme.
       
      Download: https://gitlab.com/baumrock/FieldtypeRockGrid
      Installation: https://gitlab.com/baumrock/RockGrid/wikis/Installation
      Quikckstart: https://gitlab.com/baumrock/RockGrid/wikis/quickstart
      Further instructions: https://gitlab.com/baumrock/RockGrid/wikis/quickstart#further-instructions
      German Translation File: site--modules--fieldtyperockgrid--fieldtyperockgrid-module-php.json
      Changelog: https://gitlab.com/baumrock/FieldtypeRockGrid/raw/master/changelog.md
       
      Module status: alpha, License: MIT
      Note that every installation and uninstallation sends an anonymous google analytics event to my google analytics account. If you don't want that feel free to remove the appropriate lines of code before installation/uninstallation.
       
      Contribute:
      You can contribute to the development of this and other modules or just say thank you by
      testing, reporting issues and making PRs at gitlab liking this post buying me a drink: paypal.me/baumrock/5 liking my facebook page: facebook.com/baumrock hiring me for pw work: baumrock.com  
      Support: Please note that this module might not be as easy and plug&play as many other modules. It needs a good understanding of agGrid (and JavaScript in general) and it likely needs some looks into the code to get all the options. Please understand that I can not provide free support for every request here in the forum. I try to answer all questions that might also help others or that might improve the module but for individual requests I offer paid support for 60€ per hour (excl vat).
       
      Use Cases / Examples:
      Colored grid cells, Icons, Links etc. The Grid also has a "batcher" feature built in that helps communicating with the server via AJAX and managing resource intensive tasks in batches:

      Filters, PW panel links and instant reload on panel close:

      You can combine the grid with a chart library like I did with the (outdated) RockDataTables module:

    • By thomasaull
      Some time ago I created a site profile for creation of a REST API with ProcessWire. Since I kept struggeling with updating stuff between different projects which use this, I decided to convert it into a module. It is now ready for testing: https://github.com/thomasaull/RestApi
      Additionally I added a few small features:
      automatic creation of JWT Secret at module install routes can be flagged as auth: false, which makes them publicly accessible even though JWT Auth is activated in module settings To check things out, download and install the module and check the folder /site/api for examples.
      If you find any bugs or can think of improvements, please let me know!