Freeform list showing HTML characters before populating

[simeatan]

Hi. I hope someone will be able to help me with what should be a fairly simple problem. My very limited html and AA knowledge is not helping out.

I use Ajax Callback xb function to retrieve data for the list.
In a javascript function I populate the list's fields with those values, showing them in a freeform layout.
The issue is, in those 1-2 seconds while the data is being retrieved, I can see only one row, empty but with the hardcoded character strings shown.
After that, all of the needed rows display and all looks Ok.
Is it possible to prevent the added html characters from showing up? I don't want to join them with the placeholders/variables beforehand.
And I wouldn't want to show the list in another panel and use setting the panel active to buy me those 1-2 seconds.

Example, from this excerpt of the freeform list layout, the words "Location:" and "|" will linger around before going away when the list is filled in.
----------
<div class="{dialog.style}ListItemLabelMain">Location: {city1} | {country1}</div>
----------

Now, I put the List in a Container and tried to hide the whole container with the list and the pre-display of those words.
Didn't help and the ghostly first record showed up again, I guess because I didn't specify those actions to go single-threaded.
This code in the onInitializeComplete of the component:
----------
{dialog.object}.setControlDisplay('CONTAINER_1',false);
{dialog.object}.runAction('ac_thegetxb');
{dialog.object}.setControlDisplay('CONTAINER_1',true);
// var lObj = {dialog.object}.getControl('listPlaces');
//lObj.refresh();
----------

Any ideas how can I get rid of the initial first record of the freeform list? Without adding javascript IFs, counting the records available at the time and hiding the hardcoded words.

Thanks,
Sime

[Davidk]

Re: Freeform list showing HTML characters before populating

I'm not seeing this behaviour. What build of Alpha are you using? With your Freeform layout above, my List is empty until I send it data.

Are you using the List method .populate() to populate your List with the returned XBasic data?
What is in the Static Data property of the List Data Source?
How much data are you sending to the List?

Can you post a simple UX, Containing your List, and the Callback. Don't worry about your Callback code not being able to run... that's easily changed.

[simeatan]

Re: Freeform list showing HTML characters before populating

David, thank you for the reply! I'm sorry I forgot to put the build info:

- Developer 12.4.2 build 3670

- the query is quick, not a lot of data. In the xb function grabbing around 30 records out of 4000, I'd say.
- not using .populate()
- nothing in the Static Data - for the list's "Data source" I have this java function:

function showData(){

if({dialog.Object}.__datanazad==undefined){
return '';
}else{
// show #ofrecs alert({dialog.Object}.__datanazad.length);
var listData = [];
for(i=0;i<{dialog.Object}.__datanazad.length;i++){

// var todaydt = (new Date()).toISOString().split("T")[0]; //Ok, but it might be a day off, depending on the timezone

var dateObj = new Date();
var todaydt = dateObj.getFullYear() + "-" + String(dateObj.getMonth() + 1).padStart(2, "0") + "-" + String(dateObj.getDate()).padStart(2, "0");

var listRow = {};
listRow.job_filing_number = {dialog.Object}.__datanazad[i].job_filing_number;
listRow.owner_name = {dialog.Object}.__datanazad[i].owner_name;

listData.push(listRow);

}
return listData;
}
}


-------------------------
Apologies, this code is a mix up of two old ones - gotta geta good one as a sample.

freeform html goes along these lines:


<div style="display: table; width: 100%;">
<div style="display: table-cell; vertical-align: middle;">

{*if (expired_date < todaydt)}
<div class="{dialog.style}ListItemLabelContext" style="float: right;color:white;background-color:red;">{expired_date}</div>
{*else}
<div class="{dialog.style}ListItemLabelContext" style="float: right;color:white;background-color:green;">{expired_date}</div>
{*endif}

<div class="{dialog.style}ListItemLabelMain">{job_filing_number} | {owner_name}</div>

{*if (owner_business_name)}
<div class="{dialog.style}ListItemLabelSub" style="color:#800080"><{owner_business_name}{<LogicalRowNumber>}></div>
{*endif}

</div>
<div style="display: table-cell; width: 40px; text-align: right; vertical-align: middle;">
<img src="{images.dialog.listNav}" />
</div>
</div>


Thanks again!

[Davidk]

Re: Freeform list showing HTML characters before populating

The problem is that you're actually returning data for the List to work on... return '';

It's empty... but it's data.

Turn your if statement around...

	if({dialog.Object}.__datanazad != undefined){
	
		// put together your list data
		return listData;
	}

If you don't have data... don't return anything at all.

[simeatan]

Re: Freeform list showing HTML characters before populating

I see what you mean - didn't think of the empty/blank data as different to null.

Changed the code, per your recommendation, and I'm sure it's something minor but the list doesn't come up at all now.

before:

-----------------------
if({dialog.Object}.__datanazad==undefined){
return '';
}else{
-----------------------


now:
-----------------------
if({dialog.Object}.__datanazad != undefined){
-----------------------

What did I do wrong?

[Davidk]

Re: Freeform list showing HTML characters before populating

You'd need to zip and post your UX.

[Davidk]

Re: Freeform list showing HTML characters before populating

I ran the code I posted and had no Javascript errors. I just ran it now and it's blowing up. Now the List doesn't like nothing being returned. Kinda makes sense, but no idea why it was working before.

I think you may have to return JSON to the List... but one of the elements will be empty. Then wrap your Layout in an {*if} statement.

Here is my showData function...

function showData(){

	var listData;
	
	if({dialog.Object}.__datanazad != undefined){
	
		listData = {dialog.Object}.__datanazad;
		// put together your list data
	}else{
	
		listData = [
			{"Firstname": ""} 
		];	
	}

	return listData;

}

And here is my List FreeForm Layout...

{*if Firstname!=''}
<div class="{dialog.style}ListItemLabelMain">Location: {City} | {State}</div>
{*endif}

If you don't have List data yet, then showData will return valid JSON... but with Firstname set to an empty string.

The Layout {*if} statement tests Firstname... and if it's not empty the html is rendered.

Using "Firstname" is just my example... and probably not a good idea for your List. Use an id field... or something you know will always have a value.

You wouldn't have to jump through these hoops if the List property "Delay render til explicit refresh" was available... but it's removed because of the Data Source Type.
You should ask Alpha to make it available for cases like this. It's odd because .refreshListData() works for this data source type... which is what you're using, I'm guessing, once you have data.

You might be better off using the List .populate() method. Less mucking about. Either way you're feeding the List JSON... but with .populate() you have far more control.

[simeatan]

Re: Freeform list showing HTML characters before populating

Thanks David! It makes sense. I was looking for an equivalent of "Delay render til explicit refresh" as a silver bullet to take care of this minor issue. I understand the list.populate method will allow me use the Delay in the structure.
Not a big problem since it shows only for a second being a short list but still a nuisance.

And, why can't I do this simple work around that with this human-like sequence. To make it not asynchronous, execute in a sequence.

{dialog.object}.setControlDisplay('CONTAINER_1',false); // hide the container where the empty list is, that shows the empty list with unwanted characters for a second
{dialog.object}.runAction('ac_thegetxb'); // run the xb getting the data from the json, and after that run js function distributing the resulting data to the list
{dialog.object}.setControlDisplay('CONTAINER_1',true); // show the container with now-populated list, skipping the 1 second of bare html words showing

I won't get to the project over the weekend but after I'll try the minimum component to see if I'm making some mistake in this and post it. As you said, maybe Alpha needs to expand the Delay to this way of populating a list. And will rewrite with list.populate next.

Thanks for your generous time and have a great weekend!

[Davidk]

Re: Freeform list showing HTML characters before populating

Using the List .populate() method, you don't need any kind of delay. The List is built with Static Data. You provide only the Column Names in the Static Data property... e.g.

Firstname|Lastname|City|State

When the List is rendered, it's empty. Nothing from the FreeForm Layout is displayed... because the List has no data.

Return data from your callback, and use .populate() on your List. This is much easier that trying to get around timing... and showing/hiding.

The issue you're having with utilizing a Javascript Function for the List Data, but providing no Data, should probably be addressed in Alpha's logic. If there is no data, if data is empty, don't render.

[simeatan]

Re: Freeform list showing HTML characters before populating

Thanks David! Lesson learnt - I'll use mostly .populate() from now on, being instantaneous, so it doesn't render the empty records or the html skeletons they've mixed up with.

[Davidk]

Re: Freeform list showing HTML characters before populating

Both forms of providing List data are good. It just comes down to use case. Glad it worked out.

[simeatan]

Re: Freeform list showing HTML characters before populating

Couldn't do it without your help.
And I was hesitant to use {* for one non-existent record only, because I use a slow server. Although there're not many records to process and it's just a play project.