List OnClick Based On Field Type

[hallidayo]

Hello,

I currently have a list which is based on an form/questionnaire and in this form their are many headers or normal text.

In this list when a user clicks on a row it will open a panel which has a section for them to answer a question. so the contains both questions and headers. My question is their a way in which when a user clicks on a header row/field the panel remains on the current list rather then going to the panel? Im defining the header in a field type which is either set to Question or Header.

Attached is an example of my simple list. lIST.png

Also is their a way to hide the Arrow on each row depending on the field type?

Thankyou.

[Michael1954]

Re: List OnClick Based On Field Type

There are many ways to do this but they all essentially revolve around 'stay' or 'go'. You can define the name of the panel to navigate to at row level. If there is only one possible destination you can test for 'go' and only then set the active panel.

If you set the class of the arrow to show hide based upon field type this should do what you want.

[Davidk]

Re: List OnClick Based On Field Type

May depend on how your data is set up. You're essentially creating your own Grouping process. You can achieve a nice effect by using a bit of CSS and using a List Template (very powerful stuff).

This List Template uses my data... where I have a field named qType (Header or Question). The Question Text field is named qText.

<div style="display: table; width: 100%;">
{*if qType == 'Header'}
<div style="display: table-cell; vertical-align: middle;">
{qText}
</div>
{*else}
<div style="text-indent: 25px; display: table-cell; vertical-align: middle;">
{qText}
</div>
<div style="display: table-cell; width: 40px; text-align: right; vertical-align: middle;">
<img src="{images.dialog.listNav}" />
</div>
{*endif}
</div>

Here we are saying... if qType is Header then display just the question (which is the Header text)... otherwise display the question and the > image. Also... indent the question.

In the List onItemDraw event I have...

if(data.qType == 'Header' ) { 
	ele.style.backgroundColor = '#c9c9c9';
} else { 
	ele.style.backgroundColor = '#ffffff';
}

Again, if the data qType is Header, then give the List row a dark grey background... else a white background.

In the List CSS (found in List Properties) I'm overriding the List Row Selected class with this...

.iOS7ListItemSelected {
    background-color: #e6e6e6 !important;
}

Finally, in the List onSelect event...

if(this.selectionData[0].qType != 'Header'){
	{dialog.object}.panelSetActive('PANELCARD_2');
}

If the qType is not Header... then switch PanelCards.

Over the effect looks like this...

ListHeader.PNG

[Michael1954]

Re: List OnClick Based On Field Type

Very elegant David

[hallidayo]

Re: List OnClick Based On Field Type

Hi David,

This is working brilliantly thankyou.

I have one question though say if I wanted to do the same for another qtype say 'Header2' how can I get the list styling so that both qtype Header and Header2 are exactly the same?

Thankyou.

[Davidk]

Re: List OnClick Based On Field Type

One way is to use .substr() to pick off the 1st 6 characters... since 'Header' is common...

In the List Layout..

{*if qType.substr(0,6) == 'Header'}

and in the List onItemDraw event...

if(data.qType.substr(0,6) == 'Header' ) { 
	ele.style.backgroundColor = '#c9c9c9';
} else { 
	ele.style.backgroundColor = '#ffffff';
}

and in the List onSelect event...

if(this.selectionData[0].qType.substr(0,6) != 'Header'){
	{dialog.object}.panelSetActive('PANELCARD_2');
}

[hallidayo]

Re: List OnClick Based On Field Type

Hi,

How would I do this if the q.type was say paragraph? is their a javascript OR function that can be used?

so:

{*if qType == 'Header' OR qType == 'Paragraph'}

[Davidk]

Re: List OnClick Based On Field Type

If you're adding more "Header" types... then you may be better off going the other way... e.g. onItemDraw...

if(data.qType.substr(0,6) == 'Question') { 
	ele.style.backgroundColor = '#ffffff';
} else { 
	ele.style.backgroundColor = '#c9c9c9';
}

so... everything except "Question" is a Header.

However, to answer your question... "OR" in Javascript is || and "AND" is &&

onItemDraw... would use ||

if(data.qType.substr(0,6) == 'Header' || data.qType == 'Paragraph') { 
	ele.style.backgroundColor = '#c9c9c9';
} else { 
	ele.style.backgroundColor = '#ffffff';
}

onSelect... would use &&

if(this.selectionData[0].qType.substr(0,6) != 'Header' && this.selectionData[0].qType != 'Paragraph'){
	{dialog.object}.panelSetActive('PANELCARD_2');
}

and the List Layout... would use ||

{*if qType.substr(0,6) == 'Header' || qType == 'Paragraph'}

[CharlesParker]

Re: List OnClick Based On Field Type

I wish I could CTRL+C then CTRL+V this right into my brain. David can you invent an app for that? Thanks for your contributions on this!

[Davidk]

Re: List OnClick Based On Field Type

Some of the code in Post # 8 is wrong... not as edited as it should have been. This...

if(data.qType.substr(0,6) == 'Question') { 
	ele.style.backgroundColor = '#ffffff';
} else { 
	ele.style.backgroundColor = '#c9c9c9';
}

should be this...

if(data.qType == 'Question') { 
	ele.style.backgroundColor = '#ffffff';
} else { 
	ele.style.backgroundColor = '#c9c9c9';
}