Has anyone ever tried doing this before. Up until now I’ve only ever needed to use static html files with some JavaScript and CSS. Does anyone have a very simple example?

[image] Sketchup::Layers. How do you sort it now with folders, as on the UI? Ruby API In my usual study, the question arose as to how the order of the layers and folders in the user interface could be replicated? ([Github] ) Since the version of 2018(?), the layer names are sorted naturally on the UI. (The layer names on SU2017 ordered as e.g.: 1, 11, 22, 3 on later versions shown as 1, 3, 11, 22) In Ruby the “normal” sort method will give us the former. I was curious how can we got the natural? But actually sorting is a bit more complicated when you want to consider the par…

Here is my test code: @html_content = This is a test HTMLOUTPUT @dlg00 = UI::HtmlDialog.new( { :dialog_title => dialog_title, :preferences_key => 'editpointload3', :scrollable => true, :resizable => true, :width => 450, :height => 450, :left => 1200, :top => 100, :min_width => 50, :min_height => 50, :max_width =>1600, :max_height => 1200, :style => UI::HtmlDialog::STYLE_DIALOG }) @dlg00.add_action_callback("CLOSE_DIALOG") {|action_context, params| @dlg00.close } @dlg00.set_file @html_content @dlg00.show

However it only shows a blank page in my HTML window.

use @dlg00.set_html @html_content instead of @dlg00.set_file @html_content

I just caught that right before I read your post. :slight_smile: Your right, that was it, should have caught that earlier.

[image] medeek: Has anyone ever tried doing this before. Many times and I’ve posted about it several times here. [image] medeek: Does anyone have a very simple example? I’ll use your snippet as an example. There is a quirk to UI::HtmlDialogs that if the dialog_title: parameter is empty, then the dialog will fallback to using what the HTML’s element holds. We will replace the and content in the @html string using Ruby’s String#% method to replace %{keyname} tags in the text, with values from a hash that should have matching keys to the tags in the text. (An exception will be raised if there are mismatches.) def dialog @html = %[ %{title} %{body} ] # A hash of replacement data: @content = { title: "Test Dialog", body: "This is a test" } @dlg00 = UI::HtmlDialog.new( dialog_title: "", preferences_key: 'editpointload3', scrollable: true, resizable: true, width: 450, height: 450, left: 1200, top: 100, min_width: 50, min_height: 50, max_width: 1600, max_height: 1200, style: UI::HtmlDialog::STYLE_DIALOG ) # Stuff replacemrnt data into the HTML text %{key} tags # from the hash of data. The hash keys match the %{} tags: @html = @html % @content @dlg00.add_action_callback("CLOSE_DIALOG") {|_, params| @dlg00.close } @dlg00.set_html(@html) @dlg00.show end In actual use the data for insertion is likely to come from other parts of the extension code, or could come from a JSON file imported into Ruby as a hash. Or it might be model data that has been collected into a hash. You also do not need to define a full HTML string object. In the past I have dynamically built HTML tables by appending table row fragments with data stuffed into them (as above) using a loop and a HTML table row template. After the loop is done building the table, the code appended onto the string. The table text can then be inserted into the dialog page text’s %{table} tag. I’ve even loaded the CSS from a file into a string and inserted that into a %{stylesheet} tag. Also have done this for javascript. (I may have posted an example of this. Anyway, this is the dead simple way of creating dynamic HTML. There are more complex ways like using the ERB library or JavaScript frameworks like Vue. (The SketchUp API Doc site is generated using YARD, which builds the HTML pages with ERB. Some of the SketchUp web interfaces are now using Vue which is somewhat complex.)

Some other topics where I’ve discussed this: Html dialog box to set and get information HTMLDialog Fill inputbox from csv data

What is the difference between these to methods of grabbing the html code? @html_content = <<-HTMLOUTPUT HTMLOUTPUT @html = %[ ]

I think I am reasonably confident in generating dynamic html however the one thing I’ve noted is that when I use a static html page I can use relative links to my images however when I’m sending a dynamic “string” the path for images is looking for is located here: C:\Users%username%\AppData\Local\Temp Is there a way to set the path so I can use images found within my plugin folder or better yet this path: C:\Users%username%\AppData\Roaming\Medeek\2025\medeek_engineering_ext\images

Generating Dynamic HTML for HTML Dialogs

Developers Ruby API

DanRathbun July 31, 2025, 12:30pm 8

Some other topics where I’ve discussed this:

Html dialog box to set and get information
HTMLDialog Fill inputbox from csv data

Topic		Replies	Views
How to pass values to HtmlDialog? Ruby API ui::htmldialog , domcontentloaded	11	5189	July 11, 2017
Question about htmldialog and pushing variables from Ruby to Javascript Ruby API javascript , ui::htmldialog	15	3146	May 7, 2020
Web/Html Dialog "Message box like" Ruby API	17	3562	August 5, 2020
Html dialog box to set and get information Ruby API sketchup	13	5168	September 19, 2020
[Example]An example to help you how to write SketchUp Ruby code with HtmlDialog Ruby API	12	6918	March 24, 2018

Generating Dynamic HTML for HTML Dialogs

Related topics