best practices: I'm doing it wrong
-
Hi all -
So, as many of you are aware, I've been working on an app that will allow the user to look at and modify information about various devices on a network. My original plan was to have a list of the devices at the top of the UI, and underneath the summary would be a bunch (~15) of details about the device. The user would select a device from the list, and the details for that device would update.
As mentioned, the app is to allow the user to modify this data as well as just read it. My original plan was to permit in situ modification, and a "commit" button. I now realize that this may not be the best way to go. At a minimum, I'll need to disable updates to the details while the user is editing. There's also an issue of determining when the user wishes to edit rather than just view. These are solvable but have me questioning my original design.
So, since many of you have been around this tree, what is best practice for a UI displaying information that may be updated from multiple sources? Would it be better if I replaced the "commit" button with an "edit" button, which would open a new window displaying the details to be edited? These fields wouldn't be modified by the program, only from user input.
Any other suggestions are most welcome.
-
@mzimmers
It's an eternal question whether editing of master-detail is best doing directly in the detail view or in a separate dialog, and whether to allow editing immediately or to require "start-edit" & "edit-edit"....At a minimum, I'll need to disable updates to the details while the user is editing.
What's this about?
-
@JonB what I meant was that it would be a very poor UX to have details changing automatically at the same time the user is trying to change them himself. If I'm going to enable in place editing, it seems almost axiomatic that I have to disable remote updates while the edit session is active. Not really a big deal, but something I'll have to be mindful of, and there would have to be some determination of when the edit session has begun. Would it be when the user selects an item from the summary list, or when he first focuses on an editable field, or something else?
-
Hi,
Are the details you show all refreshed from the device ? Or are some of them parameters and others values that are just read ?
-
@mzimmers
And you're saying these are being updated constantly asynchronously, I didn't know that.Something seems a bit strange: what fields is the user editing, versus what is being fetched from the devices? Is the user really editing those 13 values which are reported? You might be in danger of allowing user to set a value at the start of the editing snapshot to be sent to the device on update, when the device has been reporting it changing during editing?? Are the columns allowing editing 100% distinct from the columns being sent from the device?
-
Upon reflection, I think the answer I gave to SGaist, while correct, was a little misleading. Each device on the network will occasionally broadcast a "heartbeat" message to notify the host that he's still alive, and to convey status information. Here's a struct containing the various items to be contained in the report:
struct DeviceDetails { uint8_t macAddr[6]; char serialNbr[9]; char devName[25]; uint8_t version[4]; uint8_t ssid[64]; uint8_t psk[64]; uint8_t ipConfig; // 0 = DHCP, 1 = static. char ipAddr[16]; char gateway[16]; char subnet[16]; char ntpServer[256]; char timeZone[32]; uint8_t ledPattern; uint8_t ledBrightness; };
After thinking about this a little more, I now realize that the device will almost never make autonomous changes to this data. So...would this imply that it's reasonable to allow the user to edit in the main details area, with a "commit" button and a confirmation dialog?
EDIT: perhaps a pic would help. This is my main window in a partial state of completion.
The area below the title is a QTableView which lists the various devices on the network, and allows the user to select one by clicking on its row. The details fields are below the line. -
And, a related question: when the user presses the "commit" button, what should happen?
I'm thinking the widget sends a signal to the worker object, informing him to send a change message to the target device. But the worker needs a copy of the changed details. Should I manually construct a copy of them from the values mapped to my display, like this:
Message msg; string s; s = ui->lineEditMacAddr->text().toLocal8Bit().toStdString(); msg.add(msgTags[TAG_MACADDRESS], s); ...// repeat above line for each detail emit editCommitted(msg);
I can certainly do this, but I was wondering whether there was a preferable method.
-
@mzimmers
Well yes it is common to gather the values out of your individual input widgets, copy them out into an abstracted structure shared by the front- & back-ends, and send it some "update" signal, like your sample code. Certainly you do not want to pass the widgets themselves to the back-end. -
I've decided/realized that I don't want the details portion of the UI to be updated whenever the program receives a message. Because of this, it seems that I shouldn't map the details area to the model, but simply update the fields (manually) when a row is selected from the summary table.
The user then edits the fields as he wishes, and presses "commit" which gathers up all the information in the details area, and sends them to the worker.
Does this seem like a valid approach?
-
Just now returning to this issue.
So, my UI has a summary area which receives contstant remote updating. The user selects an item from the summary field, and details about that item are displayed in another area. The goal is to allow the user to view AND UPDATE fields in this details area.
If the details are mapped to the model, they're subject to being overwritten by remote updates. This can disrupt a user's editing session. I imagine this is a classic UI dilemma; how is it typically resolved?
Thanks...
-
@mzimmers
Well at some level I think you have to decide whether/when to start "editing" by the user and pause "updating" from the device. Conceptually first. You don't really want the user to start changing fields if they're still liable to get auto-updated while he's doing so.That probably means you need a "start edit", a bit like a database
BEGIN TRANSACTION
. This seems to naturally be your "user selects a row [and starts editing]". Though it's not so clear whether it should be as soon as the row is selected or only once the first edit is actually started (there could be a lot of time between those two actions). Then your "commit" button is like a databaseCOMMIT TRANSACTION
, or clicking to another row instead abandons the edit and is like aROLLBACK TRANSACTION
.But there are still many ways you have to decide for committing the changes. Do you update all columns or only certain ones? Do you ignore/overwrite any changes which may have happened from the device while the editing has been going on, or do you want actually to abort the update if user has changed a field which the device has also changed? These are similar to database issues, like pessimistic and optimistic locking strategies.
I think: think out what you actually want for the behaviour conceptually, only then decide which way to code to suit that.
-
@mzimmers said in best practices: I'm doing it wrong:
If the details are mapped to the model, they're subject to being overwritten by remote updates. This can disrupt a user's editing session. I imagine this is a classic UI dilemma; how is it typically resolved?
If it were me I'd keep the updating part non-editable. I'd rather just open a dialog with the data loaded at the time of the edit trigger being fired and then leave the user either to commit or discard his changes. The other thing just seems to confusing to me as a user.
-
@JonB
I agree with @kshegunov that keeping the auto-updating and editing parts separate would simplify the experience for the end user.However, using a dialog and batch-updating will still leave you with decisions about what to really update, e.g.:
- A widget has an initial value from the device, copied into the dialog.
- The end-user does not change that, but changes some other widget's value, and clicks "commit".
- Meanwhile, the first widget's underlying value on the device has changed.
What do you do? Do you commit the value currently seen by the user in the dialog back to the device thus changing it on the device, or do you not do so, thus preserving the new value in the device but not what the user saw on the dialog? And how do you recognise this situation one way or the other?
An alternative approach which avoids all of this: Do you need/want to batch up multiple changes? Are they inter-dependent or quite separate? Could you instead send a change to one widget's value back to the device immediately (and perhaps even get rid of the dialog completely and/or no need for the "abstraction" layer)? Your code probably actually becomes a lot simpler. It could be rather nice for the user to see his changes applied immediately as he makes them, no "commit" button?
-
Here's an idea, for what I would do.
When the user selects an item from the summary field the details about that item are captured in a "snapshot" as of the moment of the click.
The user than can modify that captured data how ever allowed, and he/she can submit it via a special button.
However, while the user is editing, you keep on monitoring the data and if the new data varies from the original captured one, you blend in a small indicator item. For example a red
!
next to the edit field, to let the user now, that this entry is out of date. The use can than choose to update that field by clicking on the Icon.That updates the field and updates to captured data as well, reading it for the next potential change.
-
Lots of good information in these replies; thanks, guys. Jon: the information in question isn't going to be updated frequently (in fact, most of this app's use will be for initial provisioning), but any committed changes will involve a write to NVS (non volatile storage) on the target device. Since this is (relatively) slow, and because NVS has a limited number of writes, it's probably best to avoid on-the-fly commits, and let the user perform a manual commit instead.
Based on what all of you have said, it does seem like a separate window is probably the right choice.
-
I gather that a QDialog is the right UI object to use for this. I'd like to use Designer to create the dialog, so what is the mechanism for attaching it to my main display widget? Do I use an analog to the main widget:
namespace Ui { class Widget; } class Widget : public QWidget { Q_OBJECT private: Ui::Widget *ui;
or is there a preferred method? One of the examples drew heavily on layouts and addWidget() calls, but this was for a considerably more elaborate dialog than I anticipate needing.
Thanks...