UX Component - FormView Control - Pre-Defined Editors - TextArea

[frankbicknell]

UX Component - FormView Control - Pre-Defined Editors - TextArea - A new pre-defined editor for a FormView control is now available in the Defined Controls section of the UX toolbox. The [Editor-TextArea] pre-defined control creates an editor for a FormView value. The editor uses a TextArea control and it has a vertical scroller so that long text can easily be scrolled on touch devices.

Is anyone using this? I have added it to my ux but it does not act any different than a textarea control. What am I missing?

[Davidk]

Re: UX Component - FormView Control - Pre-Defined Editors - TextArea

Looks pretty good to me. The Textarea Control set up for you in the Editor has Control Javascript built-in. This expands the slider area automatically when you touch it so that it's much easier for use.

It's a normal Textarea control, but with smart slider code added.

[frankbicknell]

Re: UX Component - FormView Control - Pre-Defined Editors - TextArea

Thanks David, I had to make a few adjustment so that I could use it. In my case the scroll bar was off to the right I had to scroll horizontally to get to it. Also I found that the scroll bar was activated in the onChange event of the textarea control. I want to scroll without having to make a change.

I moved this line from the onChange to the onFocus event as well as setting the width of the control to 96% from 100%

{dialog.object}._functions.txt_descrip_wotsetScroller(this);

I also added this line to the control javascript which move the scrollbar into view for me.

{dialog.object}._functions.txt_descrip_wotsetScroller = function(ele){
	var h = ele.scrollHeight-ele.offsetHeight;
	if({dialog.object}.txt_descrip_wottaScroller.max != h){
		{dialog.object}.txt_descrip_wottaScroller.max = h;
		{dialog.object}.txt_descrip_wottaScroller.refresh();
	}
	{dialog.object}.txt_descrip_wottaScroller.setValue(ele.scrollTop);
}



var cEle = {dialog.object}.getPointer('CONTAINER_txt_descrip_wot_SCROLLER');
{dialog.object}.txt_descrip_wottaScroller = new A5.Scroller(cEle.id,{
		flow: 'ttb',
		theme: '{dialog.style}',
		min: 0,
		max: 0,
		offset: {
			top: '4px',
			bottom: '4px',
			[B][COLOR="#FF0000"]right: '20px'[/COLOR][/B]
		},
		slider: {
			message: {
				show: 'never',
			}
		},
		onScroll: function(val){
			var ta = {dialog.object}.getPointer('txt_descrip_wot');
			ta.scrollTop = val;
		}
	});

I really don't want to have to move into the control because it brings up virtual keyboard.
I tried this code in the click event of a list control that sets the panel active that contains the scroll - text control. It shows the scroll bar but for some reason the scroll range is off. For example the scroll bar scrolls all the way to the bottom in the first 1/4".

var ele = $('{dialog.ComponentName}.V.R1.TXT_DESCRIP_WOT');
{dialog.object}._functions.txt_descrip_wotsetScroller(ele);

2017-05-21_17-56-38.png

[Davidk]

Re: UX Component - FormView Control - Pre-Defined Editors - TextArea

I don't see the behaviours you're reporting. I don't need to tap into the textarea to see the scrollbar... it's already there. I can use the scrollbar without changing the textarea data. This is all with the default settings.

[frankbicknell]

Re: UX Component - FormView Control - Pre-Defined Editors - TextArea

Not sure either. I am using the latest version 4346 - 4889? It works the same with several different android browsers and it worked the same in working preview.

[frankbicknell]

Re: UX Component - FormView Control - Pre-Defined Editors - TextArea

Are we talking about the same control? I am using the TextArea-Mobile-Scrollable in the defined controls.

[Davidk]

Re: UX Component - FormView Control - Pre-Defined Editors - TextArea

Sorry... in your original post you wrote... "Pre-Defined Editors - TextArea"... so I thought you meant the "Editor-TextArea" control... since it's the pre-defined TextArea control for use in a FormView Editor.

Now that I know you're using a different control from mentioned... the TextArea-Mobile-Scrollable control... I had a look.

The TextArea-Mobile-Scrollable control is almost identical to the Editor-TextArea control... however I don't know if they're handled any differently under the hood. The Edit-TextArea has an additional onSelect function running in the scroller section of the code...

onSelect: function(val){
	var ta = {dialog.object}.getPointer('EDITOR_1_TXTBOX');
	ta.scrollTop = val;
}

When I use the TextArea-Mobile-Scrollable control as an editor, it seems to function the same as the Editor-TextArea control.

You'd have to post a sample UX indicating whatever issues you're finding.

[frankbicknell]

Re: UX Component - FormView Control - Pre-Defined Editors - TextArea

My apologies. It looks like I am using the wrong control. I just grabbed this control out of the Defined Controls section I didn't even realize there is more than one. I will have to look at the control you have described perhaps it will do what I am looking for.

[frankbicknell]

Re: UX Component - FormView Control - Pre-Defined Editors - TextArea

I see now the other control requires using editor sets. I have not yet figured them out, or their purpose for that matter.
The reason that the scrollbar was off of my screen was because of the container that I put the TextArea-Mobile-Scrollable contol into.
I have made adjustments to the container and the scroll bar shows up properly. I was able to remove the additional 20px right margin setting that I added.
I was also able to wrap the code that shows the scrollbar in a timeout function that lets the control get populated first then activates the scrollbar.
Now when the panel is set active and the textarea control is populated by clicking a row in my list control, the scrollbar shows without me having to step into the control and the range is correct to the amount of text in the control.
Thanks for your help.

Here is the code in the onClick of the list control

setTimeout(function(){
var ele = $('{dialog.ComponentName}.V.R1.TXT_DESCRIP_WOT');
{dialog.object}._functions.txt_descrip_wotsetScroller(ele);
}, 500);