Table Editor Modal Input - How?

[Guffman]

Trying to figure out how to code the equivalent of a modal input that I see in the built-in Thermostat Controller app. Here’s a screenshot of the web page of interest:

This page results from a click on the Controlled Thermostat table “Heat” value (65 deg). After rendering the numeric input for the new “Set Heating Setpoint for Downstairs Thermostat”, the app returns to the main page, with the updated “Heat” value in the Controlled Thermostat table.

I’ve read the Developer docs, not seeing how to accomplish this in there. I have a functional AppButtonHandler connected to my table data field of interest, just don’t know how to code the modal entry to allow modification of the data field.

Any suggestions?

[bertabcd1234]

@Guffman

not seeing how to accomplish this

With great difficulty.

And some creativity. (These aren't "official" components in the UI, just some HTML and CSS tricks. They are unlikely to break given their use by some internal apps, but this is not guaranteed, and they are not documented for that reason.)

Here is one topic that gives one example--I know it focuses on the table, though the "button" input thing it uses is really all you asked about:

New tables in built-in apps

Hi, Curious if anyone knows how the new tables are created within the updated built-in apps (rm/rl/etc.) [Screenshot 2022-09-09 12.47.24 PM] Not sure how or when I would use such a thing but it would be fun to learn how to do it! Being able to put clickable links/radios/checkboxes within a table is a great addition. Much better look and feel. Awesome addition, @bravenel ! Any examples would be greatly appreciated. Thanks

For an entire working example, see also the "Lights Usage Table" example app linked to in a post there.

[Guffman]

Thanks, yes I agree with "With great difficulty".

Got something working, here's a screenshot:

Essentially just wanting a table editor for a Map, so this is good enough for now. Definitely more grunt work than expected, partly due to my capabilities, but also a function of the UI framework's limitations.

The original design was for each record to have three clickable buttons (Edit, Copy, Delete). Edit would invoke an 'Edit Record' page, Copy and Delete don't require any intervening pages. I had trouble getting the href links to work as outlined by @bravenel in the thread you referenced. So I reluctantly ditched the 'Edit' button and resorted to a "select record" then "edit selected record" approach.

The View Setpoint Table Json.. is for debugging purposes.

Any code example or help in getting the href links working would be welcome.

[bravenel]

Here is an example of a table field as href:

"<td><a href='http://${some url}' target='_blank'</a></td>"

The target causes the page to open in a new tab, optional.

[Guffman]

Thanks, what I was having trouble with was the "href to a page" where the page is defined within preferences(), not to a url target. In my case using a button event on a table field (text or icon) to invoke my "recordEditorPage" defined in the same app, the same way as the "href" block method does with:

href(name: "er" ,title: "Edit Selected Record...", page: "recordEditorPage", description: "")

[bravenel]

Whatever you'd use for the href in the app is what goes there. If it's a page in the app, just put the href info there, just like you were making a non-table reference to the page.

[Guffman]

Thanks, the "name" of the href, or the entire href (as I've listed in the previous post)?

[Guffman]

Bruce - got it figured out, used your function from another post:

Lights Usage Table

Or this for href: String hrefLink(String pageName, String linkText, Map params = null) { Integer pageNum = 55 // arbitrary number "<input type='hidden' name='params_for_action_href_name|${pageName}|${pageNum}'><button type='button' name='_action_href_name|${pageName}|${pageNum}' style='cursor:pointer;color:#1A77C9;background-color: unset;border: none;'>${linkText}</button>" }

[Guffman]

One more question - how does one utilize params in the href link? I have some pages defined using the params property, and need to pass those in.

In your "String hrefLink()" code, what is the proper way to define "params_for_action_href_name" and "_action_href_name" assuming I pass the "params" map into "hrefLink()"?

I tried a few things but can't get params into the page. I have the target page defined correctly for passed in params...

[bravenel]

Try this:

String hrefLink(String pageName, String linkText, params = null, color = "#1A77C9", font = 15) {
	String uuParams = params instanceof Map ? URLEncoder.encode("${new JsonBuilder(params)}") : ""
	def pageNum = params instanceof Map ? params.i : params
	"<input type='hidden' name='params_for_action_href_name|${pageName}|${pageNum}' value='${uuParams}'><button type='button' name='_action_href_name|${pageName}|${pageNum}' style='font-size:${font}px;cursor:pointer;color:$color;background-color: unset;border: none;text-align:left;'>${linkText}</button>"
}

You'd put that in a <td> element.

[Guffman]

OK here's what I tried. Defined a map, put the String $edit inside of a element:

mp = ["2200":"auto", "2300":"76"]
String edit = hrefLink("jsonViewerPage", "Edit", mp, "black", 20)

After clicking on the "Edit" link, app throws the following error in the log:

app:4376 2023-11-10 11:36:26.543 AM Error org.codehaus.groovy.runtime.metaclass.MissingMethodExceptionNoStack: No signature of method: java.lang.String.call() is applicable for argument types: (java.util.HashMap) values: [[2300:76, 2200:auto]] Possible solutions: wait(), chars(), any(), wait(long), any(groovy.lang.Closure), take(int) (jsonViewerPage)

[bravenel]

Maybe remove the call to URLEncoder? You can see it's got the map inside brackets, which isn't a map.

[bravenel]

I don't use hrefLink any more, only buttonLink. Rather than use params for table embedded href (see for example Actions in Rule Machine, where clicking on the action opens a page to edit the action), I use a state object.

[Guffman]

Thanks, I will attempt the same. Couldn't get the hrefLink params to work. I'm setting and clearing a state object for the "delete" and "copy" actions with success; these don't require a page to map - just code to modify the table map I'm maintaining. Will need to code rendering of the "edit" page to intervene after the button press.

[bravenel]

In RM there is just a normal href that is called from state being set from appButtonHandler, coming from buttonLink -- but it doesn't pass params, sets a state for which action is being edited. params have problems anyway, especially with embedded pages returning (no params). So called pages usually have to put params in state anyway.

[Guffman]

Ok I think I've got it figured out. I used a few state flags (booleans), one for each button action (e.g., Edit, Copy, Delete).

Thanks a bunch!