Using JavaScript to copy page IDs from Page List and field names/labels from inputfields

[Robin S]

When writing API code I often refer to the PW admin to get particular page IDs or field names. And when I'm writing client instructions I often need to insert the labels of particular fields.

To make this quicker and more convenient I added some custom JavaScript to the PW admin that copies these things to the clipboard on Alt + click and Ctrl + click. The Page List item and inputfield header are briefly highlighted in yellow to signify that the copying has occurred.

This is tested in Windows and I'm not sure if the Alt key / Ctrl key detection is the same for other operating systems but you could adjust the key detection as needed.

In /site/ready.php

// Add custom JS file to $config->scripts FilenameArray
// This adds the custom JS fairly early in the FilenameArray which allows for stopping
// event propagation so clicks on InputfieldHeader do not also expand/collapse InputfieldContent
$wire->addHookBefore('ProcessController::execute', function(HookEvent $event) {
	// Optional: for superuser only
	if(!$event->wire()->user->isSuperuser()) return;
	$config = $event->wire()->config;
	$modified = filemtime($config->paths->templates . 'admin-assets/copy-on-click.js');
	$js_url = $config->urls->templates . "admin-assets/copy-on-click.js?m=$modified";
	$config->scripts->add($js_url);
});

In /site/templates/admin-assets/copy-on-click.js

$(document).ready(function() {

	// Copy a string to the clipboard
	function copyToClipboard(string) {
		const $temp = $('<input type="text" value="' + string + '">');
		$('body').append($temp);
		$temp.select();
		document.execCommand('copy');
		$temp.remove();
	}

	// Copy page ID when Page List row is Alt + clicked
	$(document).on('click', '.PageListItem', function(event) {
		if(event.altKey) {
			const classes = $(this).attr('class').split(' ');
			for(const item of classes) {
				if(item.startsWith('PageListID')) {
					const id = item.replace('PageListID', '');
					copyToClipboard(id);
					$(this).effect('highlight', {}, 500);
					break;
				}
			}
		}
	});

	// When InputfieldHeader is clicked
	$(document).on('click', '.InputfieldHeader', function(event) {
		let text = '';
		// If Alt + clicked then copy the input name the label is for, or the ID as a fallback
		if(event.altKey) {
			event.preventDefault();
			event.stopImmediatePropagation();
			text = $(this).attr('for');
			if(!text) text = $(this).parent().attr('id');
			text = text.replace(/^Inputfield_|wrap_Inputfield_|wrap_/, '').trim();
		}
		// If Ctrl + clicked then copy the label text
		else if(event.ctrlKey) {
			event.preventDefault();
			event.stopImmediatePropagation();
			text = $(this).text().trim();
			// If AdminOnSteroids is installed use the below instead to exclude text within the AOS field edit link
			// text = $(this).clone().find('.aos_EditField').remove().end().text().trim();
		}
		if(text) {
			copyToClipboard(text);
			$(this).effect('highlight', {}, 500);
		}
	});

});

Demo (using the Tracy console only as a convenient place to paste into for demonstration):

Copying the field label is useful for getting the name of config fields too, for when you need them in your API code.

[bernhard]

Hey Robin, thx for the tutorial!

I just wanted to mention here, if anybody is reading this and looking for a solution, that RockMigrations has both features on board, as that is a very common need when working with PW from code.

Page IDs can not be copied like in your example, but they can be shown in the page tree. Maybe I should change that. I like your solution. But on the other hand sometimes it's nice to just see the ID and with your solution you'd have to paste it somewhere just to see the id. On the other hand my solution pollutes the page tree. Maybe a combination would be ideal - a page tree that shows IDs on shift or alt or something and copies the ID on click.

This is the very simple tweak that adds page ids to the page tree in RockMigrations: https://github.com/baumrock/RockMigrations/blob/main/tweaks/PageListShowIds.php

Regarding the field names - in RockMigrations I had the problem that I not only needed the field's name but also it's possible values. Sometimes that's not as easy as just a 0/1. Sometimes there are string values or sometimes it is -1. I came up with adding a tooltip that shows the field name on hover plus the value of the hovered input element:

[Robin S]

11 hours ago, bernhard said:

Page IDs can not be copied like in your example, but they can be shown in the page tree.

I like to do that too - show the page ID and also the template name in the page list. I do that via a private module which isn't installed here as it would just confuse things for this demo.

But when I'm entering an ID into some API code I feel safer if I'm copying and pasting rather than memorising and typing the ID in manually, particularly on larger sites where the IDs are getting up into 6 digits and it's easy to misread or transpose the digits.