Custom Notes (former List of Allergens)

[Cybermano]

Food Allergens Module
A simple List of Food Allergens

My needs were to provide a simple list of food allergens for our clients with restaurant related activity.
The idea was to simply output the list (to speed up the data entry) without leaving the food menu editing, eg. opening another page in new tab or window.
This isn't a perfect solution, but it works fine for my needs and I decided to share the base idea.
This could also be easily used to show little notes or short "vademecum", not only for the list of food allergens.

---

Main features
The basis

All moves from a short editing of the module in this tutorial: How to create custom admin pages by @bernhard

First of all it creates an empty admin page, with a dedicated permission to let safe-user to see it (this permission has to be created as a new ones, manually or by the module).

Once the page is created, I have hooked its behaviour into the ready.php, to show the content (basically a list).

A step further
With the tips of  @bernhard, @Soma (and many others), see here , the magic happens. 

The new page will be shown as a panel, so editors will not abandon their data entry to have a quick view to the list.

A little further
Why scroll to the top of the page to click a link?

The next step was to create a sticky button only in the food menu pages.

Again with a @bernhard tip I moved into the customization of this simple module and the related hook.

---

How to use this module

1. After installed, it creates the page /admin/page/allergens/ and the module is to be setted up.
2. The first field is a CKEditor with multi-language. This is the place where to write the informations that will be shown into the page.
3. The next field is a simply text-area where to place a bit of JS that will be appended to the markup of the text (omit the 'script' tags).
4. I also putted a checkbox with a silly statement: this to think at least twice on the safety of the written JS.

Now comes the first way to display the link to the page
Field Note with Link. Enable and save it. The module will display a new row with 4 selects (1 standard and 3 ASM):

• View mode (to show the page as Panel or as Modal PopUp);
• Templates to select: select one or more and save before proceed, so the  asm-select of the pages will be populated showing all the pages of the selected templates.
• Pages to select: also here select at least one and save before proceed to populate the asm-select for fields only with the ones that belong to the selected pages.
• Select the fields where to place the note and save again.

That's all: now you will find into the notes of the selected fields the link "See the List of Allergens".

At the same way, the option for the sticky button, but with a plus
The field select is obviously unnecessary, but you could play with the last row: the inline styles to fix your sticky button where you like. Here you could set the sticky position of the <div> and the absolute ones of the <a>.

Video Explanation
In these screencasts you could see a custom JS that show a "copy" button near a "hanna-code" call.
This because I've set a specific one for each allergen to show up a tooltip in the front end.

 

---

Last but not the least

Actually it works fine for my needs, even if it's much improvable: I'm working on the permissions creation, the uninstall section, a separate configs and defaults and how to include the hook into the module leaving free the ready.php. According to a simpler uninstall. Also I would make the link text as a dynamic text field, so it will be more flexible.

I always learn a lot here, so I would share my code for whom it could be interested.
I removed the hanna code references, but I provide you the html list of the allergens, English and Italian too, so you can paste them into the "source" of the CKEditor field to have a ready to use module.

Obviously you are free to modify the code as per your needs.

Please, keep in mind that I'm not a pro coder and I beg your pardon for my verbosity (speaking and coding). ?

I hope be helpful or for inspiration.

Bye

ready.phpList-ITA.htmlList-ENG.htmlAllergens.module

README.md

Edited April 12, 2021 by Cybermano
Edited title, updateed readme.md (with static link to video and docs pointing to this thread)

[Robin S]

Thanks for sharing this. ?

Another possible way to approach this is to use a single Hanna tag for all allergens and then use Hanna Code Dialog to create an interface where a site editor can select allergen types by label. You could use a page per allergen type and use the (multi-language?) title field for the label and an integer field for the allergen number. Then use a hook to set the options for the dialog.

$wire->addHookAfter('HannaCodeDialog::buildForm', function(HookEvent $event) {
	// The Hanna tag that is being opened in the dialog
	$tag_name = $event->arguments(0);
	// The form rendered in the dialog
	/* @var InputfieldForm $form */
	$form = $event->return;
	if($tag_name === 'allergen') {
		/* @var InputfieldCheckboxes $f */
		$f = $event->wire('modules')->InputfieldCheckboxes;
		$f->name = 'type';
		$f->id = 'type';
		$f->label = 'Type';
		foreach($event->wire()->pages->find("parent=/references/allergens/") as $allergen) {
			$f->addOption($allergen->allergen_number, $allergen->title);
		};
		$form->add($f);
	}
});

Or maybe if you are using a Repeater for your menu items you don't need Hanna Code and could just use a Page Reference field to select allergen pages per menu item.

[Cybermano]

Hi Robin,

thanks for your reply and your suggestions.

I totally missed your HC dialogue: I can't wait to study that module, I will look in depth asap ?

And the page reference (yes, I use a repeater) is also a great idea ... I hadn't thought of that.

Tks!

[bernhard]

Congratulations for your achievements ? 

I think https://github.com/BitPoet/ProcessCKInlineComplete could also be a great option? Just type @... and get suggested allergens!

[Cybermano]

43 minutes ago, bernhard said:

Congratulations for your achievements ? 

I think https://github.com/BitPoet/ProcessCKInlineComplete could also be a great option? Just type @... and get suggested allergens!

Thanks Bernhard,

your advice spurred me not to settle.

I will surely give a look at the solution of BitPoet, it sounds very interesting...

P.S. Everyday I discover a mine of treasures... 

[bernhard]

1 minute ago, Cybermano said:

P.S. Everyday I discover a mine of treasures... 

Working with PW now for several years and still have that feeling almost every day ? 

[Cybermano]

On 4/10/2021 at 4:03 AM, Robin S said:

Another possible way ... use Hanna Code Dialog

Or maybe ... use a Page Reference ...

On 4/10/2021 at 10:30 AM, bernhard said:

I think https://github.com/BitPoet/ProcessCKInlineComplete could also be a great option...

 

Thanks for pointing me out those solutions: really rocks!

For CKEditor field they are the first solution we'll considering in future.

At the point of our production code, also page reference didn't suits well (we would maintain simple textarea and HC). Surely we will change templates and code to use these powerful tools for the next uses.

Currently I think the first idea is really flexible (even if less powerful) to adopt it in a lot of ways, for lot of ready-made sites, and with different solutions without efforts.

E.g. for food related sites we could use it as the List of Allergens, for many others could be used like a docs repo or a shortcut to a help-desk, tuts o more...

[Cybermano]

Like this screen...

[teppo]

Hey @Cybermano,

Just letting you know that I opened an issue for the module here: https://github.com/cybermano/CustomNotes/issues/5. Minor things, but they are kind of showstoppers for the module right now. After fixing those, things seemed to work pretty nicely ?

On 5/1/2021 at 6:26 PM, Cybermano said:

Do you suggest me to open a new thread?

That would make sense in my opinion. Or if you prefer to, I can split the thread starting from that message (https://processwire.com/talk/topic/25435-custom-notes-former-list-of-allergens/?do=findComment&comment=213864) into a new thread — just let me know.

[Cybermano]

50 minutes ago, teppo said:

Hey @Cybermano,

Just letting you know that I opened an issue for the module here: https://github.com/cybermano/CustomNotes/issues/5. Minor things, but they are kind of showstoppers for the module right now. After fixing those, things seemed to work pretty nicely ?

That would make sense in my opinion. Or if you prefer to, I can split the thread starting from that message (https://processwire.com/talk/topic/25435-custom-notes-former-list-of-allergens/?do=findComment&comment=213864) into a new thread — just let me know.

Hi Teppo.

First of all, many thanks for you time and for your suggestions. Very appreciated.

At the moment I’m on mobile and far from my pc.
ASAP I will check it and fix as you pointed.

In the meantime, please split the discussion as you see fit and as it’s more convenient for the forum.

Many thanks again for your support.

[teppo]

13 hours ago, Cybermano said:

In the meantime, please split the discussion as you see fit and as it’s more convenient for the forum.

Done — https://processwire.com/talk/topic/25815-custom-notes/. Moved the two posts introducing Custom Notes and placed them in the Modules forum section instead of module development (it's a proper module after all), hope that's fine ?

[Cybermano]

On 6/27/2021 at 9:22 AM, teppo said:

Done — https://processwire.com/talk/topic/25815-custom-notes/. Moved the two posts introducing Custom Notes and placed them in the Modules forum section instead of module development (it's a proper module after all), hope that's fine ?

Hi @teppo

PR merged on the trust. ?

As posted on GitHub , your eyes will surely solve my newbie errors.

ASAP I will check deeply all. 
 

Thanks again.