I was dissecting some of the webui *.page files to copy some UI elements for my plugin. I reduced the `ShareEdit.page` file to this:
 

Menu="Share:1"
Title="Share Settings"
Tag="share-alt-square"
---
<?
$width = [123,300];
?>

<form markdown="1" name="share_edit" method="POST" action="/update.htm" target="progressFrame" onsubmit="return prepareEdit()"<?=$name?:">"?>
<div markdown="1" class="shade-<?=$display['theme']?>">
_(Included disk(s))_:
: <select id="s1" name="shareInclude1" multiple>
  <?foreach ($shares as $list):?>
  <?=mk_option("", $list['name'], compress($list['name']))?>
  <?endforeach;?>
  </select>

:share_edit_included_disks_help:

_(Excluded disk(s))_:
: <select id="s2" name="shareExclude1" multiple>
<?foreach ($shares as $list):?>
  <?=mk_option("", $list['name'], compress($list['name']))?>
  <?endforeach;?>
  </select>

:share_edit_excluded_disks_help:
</div>

&nbsp;
: <input type="button" value="_(Done)_" onclick="done()">
</form>

<script>



function initializeDropdown(selector, emptyText, width, firstItemChecksAll = false) {
	try {
		$(selector).dropdownchecklist({
			emptyText: emptyText,
			width: width,
			explicitClose: "..._(close)_",
			firstItemChecksAll: firstItemChecksAll
		});
	} catch (e) {
		console.error(`Error initializing ${selector}: ` + e.message);
	}
}

function destroyDropdownIfExists(selector) {
	try {
		$(selector).dropdownchecklist('destroy');
	} catch (e) {
		if (e.message.includes('prior to initialization')) {
			console.log(`${selector} not initialized, skipping destroy.`);
		} else {
			console.error(`Error destroying ${selector}: ` + e.message);
		}
	}
}

function readShare() {
	/* Declare variables at the function scope */
	var name, data, disk, include, exclude, i, j;

	name = $('select[name="readshare"]').val();
	initDropdown(true);
}

/* Remove characters not allowed in share name. */
function checkName(name) {
	/* Declare variables at the function scope */
	var isValidName;

	isValidName = /^[A-Za-z0-9-_.: ]*$/.test(name);

	if (isValidName) {
		$('#zfs-name').hide();
	} else {
		$('#zfs-name').show();
	}
}

$(function() {
	initializeDropdown('#s1', "_(Select shares to monitor...)_", <?=$width[1]?>);
	initializeDropdown('#s2', "_(None)_", <?=$width[1]?>);
	checkName($('#shareName').val());
});
</script>

I copied that, changed the top three lines accordingly for my plugin, and saved it in my plugin folder with a different name. It shows the literal text:
 

Included disk(s):
: <select id="s1" name="shareInclude1" multiple>
    <?foreach ($shares as $list):?>
        <?=mk_option("", $list['name'], compress($list['name']))?>
    <?endforeach;?>
</select>

:share_edit_included_disks_help:

Excluded disk(s):
: <select id="s2" name="shareExclude1" multiple>
    <?foreach ($shares as $list):?>
        <?=mk_option("", $list['name'], compress($list['name']))?>
    <?endforeach;?>
</select>

:share_edit_excluded_disks_help:

Here is a visual comparison:

I've had similar issue before but worked around them. There must be something I am missing or don't understand about the plugin system because I can't make sense of it. As far as my understanding goes, I don't see why the same code is being interpreted differently.

Can someone enlighten me?

This is how the header of one of my plugin's primary pages looks:

Menu="OtherSettings"
Type="xmenu"
Title="NUT Settings"
Icon="battery-three-quarters"
Tag="cog"
Markdown="false"
---

The page you're using is a sub-page of another page, which probably inherits the `Markdown` property.

If you change out the values and it becomes a primary page, you might be missing that property (as an example).

On 10/17/2024 at 4:11 AM, bobbintb said:

I was dissecting some of the webui *.page files to copy some UI elements for my plugin. I reduced the `ShareEdit.page` file to this:
 

Menu="Share:1"
Title="Share Settings"
Tag="share-alt-square"
---
<?
$width = [123,300];
?>

<form markdown="1" name="share_edit" method="POST" action="/update.htm" target="progressFrame" onsubmit="return prepareEdit()"<?=$name?:">"?>
<div markdown="1" class="shade-<?=$display['theme']?>">
_(Included disk(s))_:
: <select id="s1" name="shareInclude1" multiple>
  <?foreach ($shares as $list):?>
  <?=mk_option("", $list['name'], compress($list['name']))?>
  <?endforeach;?>
  </select>

:share_edit_included_disks_help:

_(Excluded disk(s))_:
: <select id="s2" name="shareExclude1" multiple>
<?foreach ($shares as $list):?>
  <?=mk_option("", $list['name'], compress($list['name']))?>
  <?endforeach;?>
  </select>

:share_edit_excluded_disks_help:
</div>

&nbsp;
: <input type="button" value="_(Done)_" onclick="done()">
</form>

<script>



function initializeDropdown(selector, emptyText, width, firstItemChecksAll = false) {
	try {
		$(selector).dropdownchecklist({
			emptyText: emptyText,
			width: width,
			explicitClose: "..._(close)_",
			firstItemChecksAll: firstItemChecksAll
		});
	} catch (e) {
		console.error(`Error initializing ${selector}: ` + e.message);
	}
}

function destroyDropdownIfExists(selector) {
	try {
		$(selector).dropdownchecklist('destroy');
	} catch (e) {
		if (e.message.includes('prior to initialization')) {
			console.log(`${selector} not initialized, skipping destroy.`);
		} else {
			console.error(`Error destroying ${selector}: ` + e.message);
		}
	}
}

function readShare() {
	/* Declare variables at the function scope */
	var name, data, disk, include, exclude, i, j;

	name = $('select[name="readshare"]').val();
	initDropdown(true);
}

/* Remove characters not allowed in share name. */
function checkName(name) {
	/* Declare variables at the function scope */
	var isValidName;

	isValidName = /^[A-Za-z0-9-_.: ]*$/.test(name);

	if (isValidName) {
		$('#zfs-name').hide();
	} else {
		$('#zfs-name').show();
	}
}

$(function() {
	initializeDropdown('#s1', "_(Select shares to monitor...)_", <?=$width[1]?>);
	initializeDropdown('#s2', "_(None)_", <?=$width[1]?>);
	checkName($('#shareName').val());
});
</script>

I copied that, changed the top three lines accordingly for my plugin, and saved it in my plugin folder with a different name. It shows the literal text:
 

Included disk(s):
: <select id="s1" name="shareInclude1" multiple>
    <?foreach ($shares as $list):?>
        <?=mk_option("", $list['name'], compress($list['name']))?>
    <?endforeach;?>
</select>

:share_edit_included_disks_help:

Excluded disk(s):
: <select id="s2" name="shareExclude1" multiple>
    <?foreach ($shares as $list):?>
        <?=mk_option("", $list['name'], compress($list['name']))?>
    <?endforeach;?>
</select>

:share_edit_excluded_disks_help:

Here is a visual comparison:

I've had similar issue before but worked around them. There must be something I am missing or don't understand about the plugin system because I can't make sense of it. As far as my understanding goes, I don't see why the same code is being interpreted differently.

Can someone enlighten me?

I changed the values at the top to.

 

  GNU nano 8.2                                                          /usr/local/emhttp/plugins/dynamix/test.page                                                                    
Menu="Tools"
Title="Test Settings"
Tag="share-alt-square"

 

And the rest of the code shows correctly for me oon the tools page.

 

Thanks all, I figured it out, I think. I think it had something to do with the spaces and tabs. I think maybe my IDE automatically changed the whitespace or something. I don't know much about how PHP handles whitespace so I should look into it.

3 minutes ago, bobbintb said:

Thanks all, I figured it out, I think. I think it had something to do with the spaces and tabs. I think maybe my IDE automatically changed the whitespace or something. I don't know much about how PHP handles whitespace so I should look into it.

If using Vs code on windows make sure line endings are just LF as causes issues with code also.

I think the main thing was I'm not familiar with Markdown and didn't realize the indentation was causing an issue or that it had changed slightly with the copy and paste.