UI suggestions for dynamic lists, dynamic controls and immediate editing.

[Ted Giles]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

Hey G! The voice of reason once more.
It's a bit like using what you do know, instead of what you could know.
Hope you're well and on the way to your second $ million.

[GGandhi]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

hello there Ted,
thanks and good to see you active again here.
and your app looks good, been playing with it periodically. and i see the mobile part here on the board, very good looking.
talk to you soon.

[Steve Workings]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

Gandhi - I've read your response several times over a period of time, and I'm not sure what you're suggesting.

I am indeed recording responses to a javascript array.

But are you suggesting I construct my own controls? This seems so unnecessary when Alpha has all the controls I need. Or, I don't understand what you're suggesting

Thanks

[GGandhi]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

if you have all the controls you need in alpha then there is no need for you to create a pageful of different input elements to collect data. it did not seem so far that those are available to fit your need. may be it is i who did not understand. sorry.
the controls that appear are all dependent on css, and can be easily achieved if that css is not available in alpha. but i am sure you will succeed building the user interface.
thanks for reading.

[Ted Giles]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

@ Steve. I tried building a basic web app using the logic I mentioned using V12. (My version is 12.3, Build 2689 which I got as a result of attending an Alpha Webinar)
Had a load of problems. Check boxes and radio buttons do not display properly. I don't have (or need) Phonegap, so unable to see what the results look like in a phone simulator.
So basically, I am a total failure, with the exception that I have shown an example of what you need to do I believe.

That confirms that what you need can indeed be done.

If you would like to see a simple test running on a server, so you can check out the virtual keyboard, I'll load one up for you and send you the temporary link.
It will take me about an hour to build and deploy as the example I posted a video of is running locally, and I just need to recreate the example in SQl Server 2016 and upload it.
Problem is, I cannot fit it in until Wednesday.

I will not be offended if you would rather "pass" on this, but if it helps your case with Alpha Technical then I'm happy to chip in with ideas.
Let me know if it would help or not, so I can carry on or stop thinking about options.

[Davidk]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

Hey Ted,

What product are using? You're example is written with this product... using C# and Java? When you mention Java... do you mean Java... or Javascript?

Did you build your example into Alpha... or is it completely outside of Alpha?

Thanks.

[Ted Giles]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

Objective-C for iOS,
Java for Android,
C# for Windows RT
which provides basic services to the local application for its operation
and updating.
HTML5 + Javascript application which implements the functionality of the actual local application.

[RichCPT]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

Steve Workings,

I have postponed working on this same type of problem in a UX LIST for a long time. I implemented this in an updateable grid, but it is just too slow in a Grid; it takes 20 - 30 seconds to open on a production server! It is completely unusable on Safari, as all the client-side conditional styles absolutely kill Safari. So, I have to get this solved, too.

I think I can get the users to accept having mapped fields at the bottom or side of the LIST where they will edit individual records outside of the LIST control. For mobile devices I'll make them go to a separate panel.

I am worried that if I try and make a LIST that allows direct, in-place, editing of a bunch of dynamically rendered controls, that it will be too much for WAS to handle and I will end up no better off than what I can do in a updateable Grid right now.

However, I do think it is possible to make an editable LIST! I know everyone says LISTS are not directly editable, but here's an idea:

1) For any column that needs to be editable in a UX LIST control, use a "Custom Control". This control type can be added in the LIST Builder on the "Fields" tab. Click "Add Item" button on bottom of "Fields" tab. Select "Custom Control". The property section for "Custom Control" includes a "Definition" field where xbasic code can be placed that will emit the required HTML for the control for each record. XBasic has several helper functions for generating HTML controls. This type of "Custom Control" is how I implemented a radio button group that crosses multiple columns in the updateable Grid! Each radio option appears in its own Grid colum and the user can only select one radio button at a time.

2) The Custom Control(s) would be tied to a JavaScript function that would take care of updating the underlying LIST data with changed values from the control(s) and updating the dirty status of the LIST. Also, there would be some code for handling an "undo" function.

The Alpha JS library has a function for extracting a single value from a column in a LIST:

{dialog.Object}.listGetValue(UXListName, UXControlName [,rowNumber]);

But does anyone know how to set a column's value in a LIST?

Knowing the proper way to SET a column (field) value in the LIST control is the key to making a list editable when the LIST has been built with a Custom Controls.

The Javascript inline code builder suggests using syntax like this,
"{dialog.Object}.setValue('list::MY_LIST::MY_FIELD',v , true );",
but that syntax does not work.

When using a single set of mapped fields for editing a LIST then the following will copy the changes from the editing controls back to the LIST:
var L = {dialog.Object}.getControl('MY_LIST');
L.updateListFromUXControls()

[Steve Workings]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

Thanks Rich, I've thought of that, tried it a little bit to no avail but also think it's worth more pursuit.

And thanks to everyone who has spent time on this - much appreciated.

So far I don't see how to implement the desired solution in A5. But, I've also been a bit distracted with other things, and am going to have to sit down again within a couple days and attack this again - my customer's design requires this, there's really no other good solution.

[kkfin]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

The customer model in post #1 (and Teds example) can be done with Boostrap in a5w page . It is just a form so use in form group-lists and add proper input components and toggles to lists.

And move data between this input form and Alphas list.

[Ted Giles]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

Oooh!
Ken, can you post a Jing or similar of it working?

[lgrupido]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

I would think that you want someone with experience setting up custom surveys - like you would get at survey monkey. They would have the exact same problem. Someone can go in and create a survey that would require a custom form for each iteration.

Get someone with survey creation experience and that should get you where you need to go.

[Davidk]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

The Alpha Viewbox control is perfect for this. Very lightweight and ideal for producing a "list" of mixed controls. Alpha provides many samples in the Viewbox builder, one of which is a Settings screen much like what was originally posted. On Submit, data is available to the server in e.dataSubmitted. Client-side, you can use the ViewBox Javascript "This object" selection to create a Local Namespace function which extends the Viewbox Object. Doing this is just one way you can get and set the Viewbox data.

This example uses Static JSON to create the controls you see... with 8 lines of JSON. Incredibly powerful. The example doesn't utilize a back-end, although easily done since all your data is readily available, but instead I'm using the UX phoneGapFile methods to create, write, and read a device file. This ties into the example nicely because as a user selects settings they are automatically stored in the device. Close and open the app, and your settings are restored.

This example also uses a ControlBar. The Notifications setting in the app opens a Disclosure in the ControlBar.

Amazing power in Alpha.

Here's a QRCode for an Android Install...
ViewboxQRCode.PNG

Screenshot of the Viewbox running on an iPhone 7
Viewbox.PNG

Here's a link to a video... https://youtu.be/OF5jmrER3AQ

[RichCPT]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

To answer my own question in post #38: Here's example code from AA on how to set a value in one or more columns in a LIST's row with JavaScript:

var listObj = {dialog.object}.getControl('LIST1');
//update the 4th row (index is zero based)
listObj.updateRow(3,{firstname: 'John', lastname: 'Smith'});
//update the row for list primary key value of 'ALFKI' (List is configured to return the Primary Key)
listObj.updateRow('ALFKI',{firstname: 'John', lastname: 'Smith'});

[kkfin]

Re: UI suggestions for dynamic lists, dynamic controls and immediate editing.

Oooh!
Ken, can you post a Jing or similar of it working?

Here is very simple Bootstrap form example. This is done using Bootstrap form and grid and some input controls and little javascript.
Sorry for the poor layout.

Ken