Suggestions for ListView in Script Dialog

Dear Directory Opus Developers,

First, I'd like to apologize for bothering you again with feedback, but I feel compelled to share these suggestions as the view list functionality in script dialogs is critically important for my scripting work. I use this feature extensively, and I've encountered several limitations that could be improved:

1. ​Column Management in Detailed View​

  • The list view should support adding/inserting and removing columns when in detailed mode

​2. Row Color Customization​

  • Allow configuration of alternating row colors either through resources or by rendering list styles during data loading
  • Enable whole-row color settings for better visual distinction

3. ​Column Visibility Control​

  • Provide functionality to hide specific columns by index or by array range in detailed mode

4. ​Visual Separation Between Rows​

  • Currently, rows in detailed mode lack separating lines
  • When consecutive rows share the same background color, this creates poor visual distinction and an unappealing appearance
  • example:

These improvements would significantly enhance the usability of this essential feature. Thank you for your consideration of these suggestions.

Note: All these suggestions relate to view list functionality and can be discussed in a single thread for better continuity.

Best regards, :blush:

1 and 3 are already possible. DialogListColumns [Directory Opus Manual]

Custom colors are already possible as well.

Appreciate your guidance @Leo - my oversight for not locating this earlier. Should have performed thorough documentation review before querying

Credit to @Jon for locating the custom view column styling documentation:

// Set background color for individual column (supported)  
item.subitems(0).bg("#FF0000");  

// Apply background to entire row object (currently unsupported)  
// listView.GetItemAt(0).bg("#FF0000"); 

While achievable through workarounds, this requires iteratively setting background colors per column to simulate row-level styling.

Regarding Point 4: Visual row separators in the list view component — has the team evaluated prioritization for UX refinement

Hardly a problem in a script where you can loop over the columns/items (or, more likely, set the colors as you are adding the items to the list).

You're right. Not worth over-engineering - let's prioritize bigger fish.

1 Like

I've discovered a critical issue: inserting or deleting columns in the list view corrupts existing subitem styles. :hushed_face:

See the demo script below - after clicking 'Insert Column', the new column succeeds and columns shift right, but background styles don't migrate with their original columns.

Script

var xdlg, xcrt, xcmd, xutil;
function OnClick(clickData) {
	xutil = DOpus.FSUtil;
	xcrt = DOpus.Create;
	xcmd = xcrt.Command;
	xdlg = DOpus.Dlg;
	xdlg.window = DOpus.Listers(0);
	xdlg.title = "ListViewExample";
	xdlg.template = "LV";
	xdlg.detach = true;
	xdlg.Show();
	loadListView();
	while(true){
		var Msg = xdlg.GetMsg();
		if (!Msg.result) break;
		
		var focus = Msg.focus;
		var event = Msg.event;
		var mctrl = Msg.control;
		var value = String(Msg.value);
		var index = String(Msg.index);
		var data = String(Msg.data);
		if(mctrl === "insertBtn"){
			xinsertColumn();
		}
	}
}

// Test: insert new column
function xinsertColumn(){
	var listView = xdlg.Control("listview1");
	var columns = listView.columns;
	// Bug: New column insertion overwrites existing subitem background styles
	columns.InsertColumn("Rank1", 3);
	columns.InsertColumn("Rank2", 5);
}

// Template data
function loadListView(){
	var listView = xdlg.Control("listview1");
	var dataList = getDataList();
	try{
		for(var i = 0; i < dataList.length; i++){
			var rdata = dataList[i];	
			var rid = listView.AddItem(rdata[0]);
			var items = listView.GetItemAt(rid);
			var subitems = items.subitems;

			var oee = i % 2 != 0;
			for(var d = 1; d < rdata.length; d++){
				subitems(d-1) = rdata[d];
				if(oee) subitems(d-1).bg("#303030");
				subitems(d-1).bg("#1E5128");
			}

			
			var cell3 = subitems(2);
			if(String(cell3).search("/08/") > 0){
				cell3.fg("#3099ff");
			}
			var cell5 = subitems(4);
			if(Number(cell5) > 2000){
				cell5.fg("#FFFFFF");
				cell5.bg("#F00FFF");
			}
		}
		listView.columns.AutoSize();
	}catch(err){
		xlog("error message: " + err.message);
	}
}

// Template data
function getDataList(){
	var datas = [
		[1, "MAX-SHA", "US-F20-10", "2005/07/01", "45.2", "1500", "N", "200", "v1.3.13"],
		[2, "MAX-SHA", "US-F20-11", "2006/06/12", "40.23", "2343", "Y", "343", "v2.5.1"],
		[3, "MAX-SHA", "US-F20-12", "2006/08/20", "53.39", "1120", "Y", "90", "v1.4.22"],
		[4, "MAX-SHB", "US-K45-S4", "2007/05/23", "58.9", "300", "N", "10", "v2.8.0"]
	];
	return datas;
}

// Print log
function xlog(str){
	DOpus.Output(String(str));
}

Resources

<resources>
	<resource name="LV" type="dialog">
		<dialog height="183" lang="chs" maximize="yes" minimize="yes" opacity="230" resize="yes" title="DService" width="374">
			<control height="175" name="tab1" type="tab" width="366" x="5" y="4">
				<tabs>
					<tab dialog="P1" />
				</tabs>
			</control>
		</dialog>
	</resource>
	<resource name="P1" type="dialog">
		<dialog height="158" lang="chs" title="DataList" width="360">
			<control halign="left" height="12" name="xid" tip=" " type="edit" width="64" x="34" y="7" />
			<control halign="left" height="8" name="static1" title="Id:" type="static" valign="top" width="12" x="18" y="10" />
			<control fullrow="yes" height="132" name="listview1" type="listview" viewmode="details" width="360" x="0" y="26">
				<columns>
					<item text="Id" />
					<item text="Project" />
					<item text="Name" />
					<item text="Date" />
					<item text="Price" />
					<item text="Sales" />
					<item text="Status" />
					<item text="Likes" />
					<item text="Version" />
					<item text="Download" />
					<item text="Remark" />
				</columns>
			</control>
			<control halign="left" height="8" name="static2" title="Name:" type="static" valign="top" width="27" x="120" y="9" />
			<control halign="left" height="12" name="xname" tip=" " type="edit" width="73" x="148" y="7" />
			<control height="14" name="insertBtn" title="Insert Column" type="button" width="57" x="249" y="6" />
		</dialog>
	</resource>
</resources>

1 Like

We've fixed that for the next beta.

Since previous posts aren't editable, now providing complete column add/delete operations code for the list view in this new reply

Script Code

var xdlg;
function OnClick(clickData) {
	xdlg = DOpus.Dlg;
	xdlg.window = DOpus.Listers(0);
	xdlg.title = "ListViewExample";
	xdlg.template = "LV";
	xdlg.detach = true;
	xdlg.Show();
	loadListView();
	while(true){
		var Msg = xdlg.GetMsg();
		if (!Msg.result) break;
		var mctrl = Msg.control;
		if(mctrl === "insertBtn"){
			insertColumn();
		}else if(mctrl === "delBtn"){
			deleteColumn();
		}
	}
}

// Test: insert new column
function insertColumn(){
	var listView = xdlg.Control("listview1");
	var columns = listView.columns;
	// Bug1: New column insertion overwrites existing subitem background styles
	var subitems = listView.GetItemAt(0).subitems;
	var cid1 = columns.InsertColumn("Rank1", 3);
	var cid2 = columns.InsertColumn("Rank2", 5);
	subitems(cid1-1).bg("#4AD6DB");
	subitems(cid2-1).bg("#D8C422");
	columns.AutoSize();
}

// Test: delete column
function deleteColumn(){
	var listView = xdlg.Control("listview1");
	var columns = listView.columns;
	// Bug 2: Deleting columns also causes style corruption, and previous effects cannot be restored.
	columns.DeleteColumn(3);
	columns.DeleteColumn(4);
	columns.AutoSize();
}

// Load ListView
function loadListView(){
	var listView = xdlg.Control("listview1");
	var dataList = getDataList();
	try{
		listView.redraw = false;
		for(var i = 0; i < dataList.length; i++){
			var rdata = dataList[i];	
			var rid = listView.AddItem(rdata[0]);
			var items = listView.GetItemAt(rid);
			var subitems = items.subitems;

			var oee = i % 2 != 0;
			for(var d = 1; d < rdata.length; d++){
				subitems(d-1) = rdata[d];
				if(oee) subitems(d-1).bg("#303030");
				subitems(d-1).bg("#1E5128");
			}

			
			var cell3 = subitems(2);
			if(String(cell3).search("/08/") > 0){
				cell3.fg("#3099ff");
			}
			var cell5 = subitems(4);
			if(Number(cell5) > 2000){
				cell5.fg("#FFFFFF");
				cell5.bg("#F00FFF");
			}
		}
		listView.columns.AutoSize();
		listView.redraw = true;
	}catch(err){
		xlog("error message: " + err.message);
	}
}

// Template data
function getDataList(){
	var datas = [
		[1, "MAX-SHA", "US-F20-10", "2005/07/01", "45.2", "1500", "N", "200", "v1.3.13"],
		[2, "MAX-SHA", "US-F20-11", "2006/06/12", "40.23", "2343", "Y", "343", "v2.5.1"],
		[3, "MAX-SHA", "US-F20-12", "2006/08/20", "53.39", "1120", "Y", "90", "v1.4.22"],
		[4, "MAX-SHB", "US-K45-S4", "2007/05/23", "58.9", "300", "N", "10", "v2.8.0"]
	];
	return datas;
}

// Print log
function xlog(str){
	DOpus.Output(String(str));
}

Resource

<resources>
	<resource name="LV" type="dialog">
		<dialog height="183" lang="chs" maximize="yes" minimize="yes" opacity="230" resize="yes" title="DService" width="374">
			<control height="175" name="tab1" type="tab" width="366" x="5" y="4">
				<tabs>
					<tab dialog="P1" />
				</tabs>
			</control>
		</dialog>
	</resource>
	<resource name="P1" type="dialog">
		<dialog height="158" lang="chs" title="DataList" width="360">
			<control halign="left" height="12" name="xid" tip=" " type="edit" width="36" x="34" y="7" />
			<control halign="left" height="8" name="static1" title="Id:" type="static" valign="top" width="12" x="18" y="10" />
			<control fullrow="yes" height="132" name="listview1" type="listview" viewmode="details" width="360" x="0" y="26">
				<columns>
					<item text="Id" />
					<item text="Project" />
					<item text="Name" />
					<item text="Date" />
					<item text="Price" />
					<item text="Sales" />
					<item text="Status" />
					<item text="Likes" />
					<item text="Version" />
					<item text="Download" />
					<item text="Remark" />
				</columns>
			</control>
			<control halign="left" height="8" name="static2" title="Name:" type="static" valign="top" width="27" x="88" y="9" />
			<control halign="left" height="12" name="xname" tip=" " type="edit" width="41" x="116" y="7" />
			<control height="14" name="insertBtn" title="Insert Column" type="button" width="57" x="184" y="6" />
			<control height="14" name="delBtn" title="Delete Column" type="button" width="57" x="263" y="6" />
		</dialog>
	</resource>
</resources>

Yes they are.

It depends how old the posts are, and in which part of the forum.