Updatable, ReadOnly field in a Detail View

[RaEd.]

I have a TextArea control called Notes displaying in a Detail View in which users can enter a new note by clicking on the "New Note" button, which displays a javscript prompt, takes input from the user, and attaches a timestamp to the beginning of the recorded input before appending it to the existing Notes field. The field updates a NVARCHAR(MAX) field on an SQL Server table.

The idea is to have a TextArea that displays information similar to the example below -

24/01/2014 9:31:51 | add a note
25/01/2014 15:12:55 | this is a test
11/02/2014 8:11:16 | 123 123

What I need to do is to be able to save these notes, whilst preventing the user from directly editing the text in the control.
The problem I'm having is that I can't seem to stop users from entering text directly into the control, which allows them to change the details of the timestamp or to just enter information without one, and allow them to save the information at the same time. If I disable the field using the "Enable expression" property then none of the changes to the field are saved.

Is there anything similar to the "Readonly expression" property available to UX controls, or another control type or method of capturing data that would be more suited to my needs?

[Clipper87]

Re: Updatable, ReadOnly field in a Detail View

I think you'll need to work with 2 fields; 1 to gather all the text & 1 to do the actual entry because you dont seem to want users to be able to to edits once a note has been entered.

[RaEd.]

Re: Updatable, ReadOnly field in a Detail View

They should be able to append more notes to the field, but only using the prompt (which I've yet to test on a mobile device, which could cause issues itself.)
I'll play around with enabling/disabling the field around appending the information and see if I can work something out.

[RichCPT]

Re: Updatable, ReadOnly field in a Detail View

Paul, maybe you could ask AlphaSoftware if they plan to make the "Readonly expression" for controls in a UX available to controls in a Grid and Detail Part of Grid.

If they do not plan on doing that then you could just manually set the "readOnly" attribute of the html "input" element yourself using the "Client Side Properties / Conditional Style", "Function" property. I think video # 84 discusses how to use the "(Javascript) Function" property in client-side "Conditional Style", "Calculate Field Expression", etc. The Javascript "Function" property is really a cool thing that lets you do all sorts of stuff.

Here's a quick example how to use it in a Grid:
- For a control, go to the "Conditional Style" property under "Client Side Properties". (You can do choose another client-side property to put it in, if you like)
- Add a new condition with a "Logical Expression" of "1 = 1"
- In the bottom editbox labeled "Function" type in the name of Javascript function you will create to set the controls special attributes. For example, I made a function called "DisableInputCtl". Don't add any parameters, just the function name - alpha will automatically supply one parameter to the function which is a pointer to the html element.
- In the Builder go to the "Code / Javascript Functions" property and define the function. Here is an example:

function DisableInputCtl( ele )
{
if( !ele ) { return; }
ele.readOnly = true;
ele.tabIndex = "-1";
}

The above code will make the control read-only and also remove it from the tabbing order. WARNING: The control attribute names, "readOnly" and "tabIndex" are case sensitive! You can set any property you want, like the control's colors. You can also get creative and compute other related control names, like the dropdown button for listboxes, and the calendar control icon for date pickers, and then hide or disable them.

Here's the complete function I use now for editboxes that may contain a date picker or a lookup button:

function DisableInputCtl( ele )
{
if( !ele ) { return; }
var id = ele.id;
ele.readOnly = true;
ele.tabIndex = "-1";
ele.style.color = "#000080";
ele.style.backgroundColor = "#e0dacc";
ele.style.visibility = "visible";
idc = id + ".CONTAINER";
var cntnr = $(idc);
if( cntnr != 'undefined' ) {
cntnr.style.visibility="visible";
}
id = id + ".BUTTON";
var btn = $(id);
if( btn != 'undefined') {
btn.style.display="none";
}
}

p.s. the code that adjusts the ".CONTAINER" control is there to undo changes made by another function where I sometimes hide the control instead of disabling it. In the real app I have more conditions on the control besides the last one of "1 = 1".

[Lance Gurd]

Re: Updatable, ReadOnly field in a Detail View

I have something similar in one of my UX's quite simple. See the attached, users can add new date stamped notes, but can't edit them once saved.

[RaEd.]

Re: Updatable, ReadOnly field in a Detail View

Rich,

I just tried your implementation and it works beautifully!
I had no idea that the element was passed as a parameter in Conditional Style functions.

I'll have a play around and see if I can't use it for some other bits.

Thanks, everyone~