Help adding pages & functionality to webGUI

[meep]

Hi Folks, 

 

Trying to write a plugin and very frustrated with the scant documentation.

 

I've figured out creating the skeleton, the plugin settings page, updates, saving out data and the like.

 

Now, I want to add a page to the webGUI, and add functionality into some other existing pages, and cannot figure out how to best go about implementing such 'overrides'

 

The idea is to add a new tab to 

/Main/Settings/Device?name=diskN

 

to allow users add a note associated with the disk. Then, on pages where disks are listed (Dashboard, Main etc.), add an icon or rollover state to each disk to display the note.

 

What's the best way to add functionality into /webgui/plugins/dynamix/ ? Can I dynamically create / replace pages in there from my own plug in? Surely not sustainable in the case of updates etc?

 

I've had a good read through what's available in this forum, tried several search terms, and poked about a lot in existing plugins. The closest I could find to something I'm trying is @Squid's Docker Folder, which adds a button to a specific page in the UI. Are there any other plugins that add new pages or extra functionality to existing pages that I could look at? 

 

Any pointers appreciated. I'm just looking for a push in the general direction.

 

Bonus question: how to gain access to the webGui design sub forum? Some of my searching led to threads there, but I'm not permitted to read them.

 

 

 

[itimpi]

Which of the following are you trying to achieve:

1. A new top level page (that appears on the main menu).
2. A new section within a current top level page
3. Replace standard Unraid pages
4. Add a new button/field to an existing section in a top level page
5. Add a new panel to the Dashboard.

The first 2 are relatively easy to achieve, but the next two are much harder.   Option 2) is by far the easiest and least likely to have undesirable side-effects.   Option 3 should be avoided I would think as it is likely to break any time there is a new Unraid release.  Option 5) will require you to take specific action to make it compatible with the 6.12 release.

[meep]

Thanks for the response. I guess I need 2 and 4 from your list.

 

(I know how to do 1, don't want to do 3 for reasons you outline and not 5)

 

I'm hoping to do 2 things;

 

A new section (tab) within this second level page;

 

 

And an additional icon, column or rollover (TBD) per line item for disks on the dashboard, and under each tab on the Main page where disks are listed;

 

 

 

[SimonF]

23 minutes ago, meep said:

Thanks for the response. I guess I need 2 and 4 from your list.

 

(I know how to do 1, don't want to do 3 for reasons you outline and not 5)

 

I'm hoping to do 2 things;

 

A new section (tab) within this second level page;

 

 

And an additional icon, column or rollover (TBD) per line item for disks on the dashboard, and under each tab on the Main page where disks are listed;

 

 

 

Are you looking to append to an existing GUI page or your own.

 

It will be defined under the same menu. 

 

You have a toplevel page.

 

Menu="SnapshotInformation"

Title="Snapshots"

Type="xmenu"

Tabs="true"

Icon="fa-clone"

 

Then the other pages one per tab

 

Menu="Snapshots"

Title="BTRFS Volumes"

icon="fa-clone"

 

https://github.com/SimonFair/Snapshots/tree/main/source

Edited March 19, 2023 by SimonF

[itimpi]

For item 4) I think you ARE going to have to modify standard Unraid pages and/or scripts to add the extra item. 

 

The only thing I can suggest is once you work out what change you want you should see if you can insert it dynamically into pages/scripts during plugin install rather than replacing the pages/scripts in their entirety.   An appropriate ‘sed’ edit or something similar could be used if you can find an appropriate search term to tell you where to insert it into the relevant files.   That might then work across multiple Unraid releases if the anchor point is invariant, but would need checking for each release in case it changes.

[meep]

32 minutes ago, SimonF said:

Are you looking to append to an existing GUI page or your own.

 

It will be defined under the same menu. 

 

You have a toplevel page.

 

Menu="SnapshotInformation"

Title="Snapshots"

Type="xmenu"

Tabs="true"

Icon="fa-clone"

 

Then the other pages one per tab

 

Menu="Snapshots"

Title="BTRFS Volumes"

icon="fa-clone"

 

https://github.com/SimonFair/Snapshots/tree/main/source

 

Looking here;

 

 

I see these pages;

 

 

Which are what (I believe) generate this;

 

I want to add a 'driveTag' tab there. I've added this page inside my plugin;

 

Which starts like this;

 

But nothing shows. Trying to figure out what I'm doing wrong.

 

[bonienl]

1. Create a folder for your plugin, e.g.

mkdir /usr/local/emhttp/plugins/myplugin

 

2. Create the file DeviceTag.page and the place the file in the folder above

Menu="Device New"
Title="Device Tag"
---
<h1>EXAMPLE</h1>

 

[SimonF]

27 minutes ago, meep said:

 

Looking here;

 

 

I see these pages;

 

 

Which are what (I believe) generate this;

 

I want to add a 'driveTag' tab there. I've added this page inside my plugin;

 

Which starts like this;

 

But nothing shows. Trying to figure out what I'm doing wrong.

 

Not sure what you are using to write the files, but make sure they are LF and not CRLF for end of lines.

[bonienl]

In addition: never let your plugin modify stock files of Unraid, this is asking for trouble.

 

Unraid supports a system which allows a plugin author to replace a stock page file by a customized version.

Replacement works very simple and ensures that uninstalling the plugin reverts everything to original.

 

An example

 

Say you want to make your own version of "DeviceAttributes.page"

This file is stored in /usr/local/plugins/dynamix/DeviceAttributes.page

 

Your plugin can simply create its own "DeviceAttributes.page" file

Store your file in /usr/local/plugins/myplugin/DeviceAttributes.page

 

During GUI build the file under "myplugin" is loaded instead of the stock file.

As long as the plugin is installed, the customized version is used, uninstalling the plugin reverts to the stock file automatically.

 

[meep]

1 hour ago, bonienl said:

1. Create a folder for your plugin, e.g.

mkdir /usr/local/emhttp/plugins/myplugin

 

2. Create the file DeviceTag.page and the place the file in the folder above

Menu="Device New"
Title="Device Tag"
---
<h1>EXAMPLE</h1>

 

 

Cheers

 

That's exactly the folder structure I had, with no joy. However, when I simplified the file contents as per your suggestion, the tab appeared, so there must have been some error in the page itself. Now I can press on with this part. Appreciate it.

[itimpi]

It can be worth running

php -l filename

on the page file to check that does not throw out any errors.   I also use on any php script files before trying to use them.

[bonienl]

Unraid 6.12 has a new functionality - PHP Settings (Tools)

Here you can enable error logging and open a window to see in realtime any errors when opening GUI pages (your plugin)

 

[meep]

Thanks for help so far. Making good progress (and some of the above was down to non Unix line breaks in one of my files - D'Oh!

 

One small item I cannot find an answer to.....

 

Is it possible to direct link to a tab within a page?

 

For example, if I click on a disk under 'MAIN', the link brings me to the first '<diskname> Settings' tab of the Device.page (/Main/Settings/Device?name=parity)

 

Is there a URL that can be used to load up one of the other tabs in context of the parent page? 

 

For example

Quote

/Main/Settings/DeviceIdentify?name=parity

 

will display the 'Identity' tab by itself (DeviceIdentify.page), but I'd like to use something like

Quote

/Main/Settings/Device?name=parity&tab=Identity

 

to show all the tabs, with that particular one selected.