Alpha Video Training
Results 1 to 4 of 4

Thread: Using variables in list layout

  1. #1
    Member
    Real Name
    John Titor
    Join Date
    May 2015
    Posts
    109

    Default Using variables in list layout

    Hi guys,

    I saw this in the sample PunchList app.

    I want to do something like this :

    Code:
    <div style="display: table-cell; vertical-align: middle;">
    			{*if (parseInt(childCount) > thisApp.redAlertThreshold)}
    				<div class="[theme:listBox.base.item.parts.contextClassName|{dialog.style}ListItemLabelContext]" style="float: right;"><span class="red">{childCount}</span></div>
    			{*elseif (parseInt(childCount)) > 0}
    				<div class="[theme:listBox.base.item.parts.contextClassName|{dialog.style}ListItemLabelContext]" style="float: right;"><span class="green">{childCount}</span></div>
    			{*endif}
    		</div>
    They use that childCount variable in the List's list payout. I just want to use the value of a field in the list and if that value is more than for example 3 the value should display red in the list.


    Any ideas how I can use the valie of a field in the record to make a similar if statement in my list layout?

  2. #2
    "Certified" Alphaholic Lance Gurd's Avatar
    Real Name
    Lance Gurd
    Join Date
    Jun 2005
    Location
    Southampton, UK
    Posts
    1,434

    Default Re: Using variables in list layout

    Hi John,

    If you go to onItemDraw event in the list controls system events at the bottom of the javascript window there is a button 'Examples of typical onItemDraw event handlers' that brings up the following
    //example 1
    if( $u.s.toNum(data.balance) > 1000) {
    var e = {listElement:btn1};
    e.style.backgroundImage = 'none';
    e.style.backgroundColor = 'red';
    }

    //example 2
    if( (index % 2) == 0 ) {
    ele.style.backgroundColor = '#8496c6'; //even row
    } else {
    ele.style.backgroundColor = '#7685f8'; //odd row
    }

    This is how you can colour different elements in your list

  3. #3
    "Certified" Alphaholic
    Real Name
    Rich Fulham
    Join Date
    May 2011
    Location
    Portland, OR
    Posts
    1,021

    Default Re: Using variables in list layout

    I think the LIST is very much the same as the VIEWBOX when it comes to client-side templating capabilities. I think alpha has just organized the property builder for a LIST with a freeform region a bit differently than the VIEWBOX builder and the syntax for calling JS functions from the template could be a bit different, like the [scope] thing. I would expect your template code can refer to field in the LIST exactly the way one does for a VIEWBOX - you just use the field name, as-is, in the "{*if }" expression. If you need to compare a field value to some variable then you can use an @ function at the appropriate section level to set a "[temp]." variable that can be used in a detail section of the template when comparing it to a fields value. Have a look at the videos for UX_V12--118.

  4. #4
    Member
    Real Name
    John Titor
    Join Date
    May 2015
    Posts
    109

    Default Re: Using variables in list layout

    Hi guys ! I made some progress but have a follow up question.

    My list layout looks like

    Code:
    <div style="display: table; width: 100%;">
    	<div style="display: table-cell; vertical-align: middle;">
    	<div class="[theme:listBox.base.item.parts.detailClassName|{dialog.style}ListItemLabelDetail]" style="float: right; font-size:36px;">{Priority}</div>
    	<div class="[theme:listBox.base.item.parts.mainClassName|{dialog.style}ListItemLabelMain]"style="font-size:18px;">{Equipment}</div>
    	<div class="[theme:listBox.base.item.parts.subClassName|{dialog.style}ListItemLabelSub]">{Component}</div>
    	<div class="[theme:listBox.base.item.parts.contentClassName|{dialog.style}ListItemContent]">		
    		{DateDiagnosed}<br/>
    		
    	</div>
    	</div>
    	<div style="display: table-cell; width: 40px; text-align: right; vertical-align: middle;">
    		<img src="{images.dialog.listNav}" />
    	</div>
    </div>
    and in my onItemDraw I got something like :

    Code:
    if( $u.s.toNum(data.Priority) > 1) {
    var e = {listElement:Priority};
    This works good but it kinda just highlights the field with the relevant color. I want the actual element the number is floating in to be colored.

    mstsc_2017-11-27_08-07-25.png

    Anyone know how I can point to that element rather than the field?

Similar Threads

  1. List Control Layout - Change Displayed Value in Layout Template
    By Pizzadude in forum Mobile & Browser Applications
    Replies: 2
    Last Post: 11-22-2016, 03:00 PM
  2. Replies: 1
    Last Post: 10-04-2013, 08:09 AM
  3. XD Tree Supercontrol & Layout Variables
    By MoGrace in forum Alpha Five Version 10 - Desktop Applications
    Replies: 9
    Last Post: 05-13-2013, 04:17 PM
  4. Variables variables global, session or layout?
    By Greg Fong in forum Alpha Five Version 4
    Replies: 4
    Last Post: 07-11-2001, 02:54 AM
  5. Layout variables
    By Alan Floyd in forum Alpha Five Version 4
    Replies: 10
    Last Post: 04-02-2001, 12:32 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •