Alpha Video Training
Results 1 to 22 of 22

Thread: Client Side Conditional Style on a list control field missing

  1. #1
    Member
    Real Name
    David Fricke
    Join Date
    Sep 2011
    Location
    Kenosha, WI
    Posts
    403

    Default Client Side Conditional Style on a list control field missing

    On the list control, I see a Server-Side Conditional Style for a field, but no Client-Side Conditional Style. Anyone know how to do this? I can set the Conditional Style for the entire row, but I don't see anywhere for a client-side on a single field.

  2. #2
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,672

    Default Re: Client Side Conditional Style on a list control field missing

    If you're using a FreeForm Layout, you can use Template commands... e.g.

    Code:
    {*if (parseInt(CustAmount) > 100)}
    	<div class="[theme:listBox.base.item.parts.contentClassName|{dialog.style}ListItemContent]" style="float: right; color:green;">
    		{CustAmount}
    	</div>
    {*else}
    	<div class="[theme:listBox.base.item.parts.contentClassName|{dialog.style}ListItemContent]" style="float: right; color:red;">
    		{CustAmount}
    	</div>
    {*endif}
    Last edited by Davidk; 06-15-2017 at 01:09 AM.

  3. #3
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,672

    Default Re: Client Side Conditional Style on a list control field missing

    Another way to apply Client-side Conditional Styling on a List Control is to use the List onItemDraw Event. E.g.

    Code:
    if(data.State == 'CO' ) { 
    	var e = {listElement:btn1};
    	e.innerHTML = data.Lastname;
    }
    
    if(data.State == 'MA') {
    	e = {listElement:btn1};
    	e.attributes['a5-item'].value = '';
    	e.className = "null iOS7Button iOS7ButtonDisabled";
    }
    
    
    if( (index % 2) == 0 ) { 
    	ele.style.backgroundColor = '#fffaeb';
    } else { 
    	ele.style.backgroundColor = '#d4fad2'; 
    }
    Here, if the State='CO' the Button text is set to the Last Name
    If the State is 'MA' the button is disabled.
    Finally, set alternating colours on the rows.

    There are 2 Videos you should have a look at... UXL_V12--12 and UXL_V12--13. You can also search in the Videos for Conditional Styling and you'll see them.

    Both include a sample component... and 13 is where the above code comes from.
    Last edited by Davidk; 06-15-2017 at 01:11 AM.

  4. #4
    Member
    Real Name
    David Fricke
    Join Date
    Sep 2011
    Location
    Kenosha, WI
    Posts
    403

    Default Re: Client Side Conditional Style on a list control field missing

    Just need a simple 'if color = '1', then '#fffff' and so on. Just looking to change the background color based on the value of a field.

  5. #5
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,672

    Default Re: Client Side Conditional Style on a list control field missing

    Extrapolating from the samples... and using the List Control onItemDraw event...

    Code:
    if(data.Color == '1') {
    	e = {listElement:City};
    	e.style.backgroundColor = '#ff0000';
    }
    If the field "Color" = '1' then change the backgroundColor of the field City.

    Remember... case matters for field names.

    If you're testing "Color" for more than 1 value, then use a Javascript switch statement.

  6. #6
    Member jgrannis's Avatar
    Real Name
    Jeff Grannis
    Join Date
    Apr 2016
    Location
    New Iberia, LA
    Posts
    344

    Default Re: Client Side Conditional Style on a list control field missing

    David, maybe it wasn't always the case (I'm a young Alpha user so I don't know if it changed), but you can also use the template commands within the List Layout: Column Properties: Template property even with the Column layout type.
    That being said, of course with the Column layout type, it will be a little harder to control the background color of the whole "cell" because of the padding within the "row DIV" versus the padding (or lack of padding) within the "item DIV".

  7. #7
    Member
    Real Name
    David Fricke
    Join Date
    Sep 2011
    Location
    Kenosha, WI
    Posts
    403

    Default Re: Client Side Conditional Style on a list control field missing

    That second one works just fine. What would be the e.style.?? for text color? and would you use an && operator if you wanted to do the background AND the text color?

  8. #8
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,672

    Default Re: Client Side Conditional Style on a list control field missing

    Everything follows the object model... and is exactly the same as standard Javascript css settings. Essentially, nothing is different in Alpha. You get a pointer to an element object and set it's style object properties.

    e.style.color for foreground color - the text colour
    e.style.backgroundColor for background colour
    e.style.fontSize

    To set multiple properties, just set each property.

  9. #9
    Member
    Real Name
    David Fricke
    Join Date
    Sep 2011
    Location
    Kenosha, WI
    Posts
    403

    Default Re: Client Side Conditional Style on a list control field missing

    Perfecto! Thanks!

  10. #10
    Member
    Real Name
    Sime Atanasov
    Join Date
    May 2010
    Posts
    49

    Default Re: Client Side Conditional Style on a list control field missing

    David,

    I know this is an older thread but I was wondering how would you implement a conditional style grouping by a common value of a field?
    It would be a list layout sorted by that field, values repeating in the rows.
    For example:
    F1 F2 F3
    A 1 1
    A 1 2
    A 1 3
    C 2 1
    C 2 2
    D 3 1
    K 4 1
    K 4 2
    K 4 3
    K 4 4
    K 4 5
    ............
    ...........
    Z M 3
    Z N J

    All subsequent.

    Simply, I don't know how to put a different background color at the turn of a value in the F1 field. Ex. Yellow for F1="A", red for F1="C" etc. So they are color-coded. Something I use in the FRX report in VFP, for example. I can't count on a same amount of rows for every F1 group, and using the list rownumber doesn't get me far. How do we get in the looping of the html list layout, or even change the background for the next group at the switch of the group values? I'm Ok with alternating two colors for every new group.

    Thanks!
    Sime
    PS Using AA ver 4.2. I'd assume the code is same for the various versions of Alpha Anywhere, unless I'm missing a genie.

  11. #11
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,672

    Default Re: Client Side Conditional Style on a list control field missing

    You'd have to mock up a sample... not sure I fully understand.

  12. #12
    Member
    Real Name
    Sime Atanasov
    Join Date
    May 2010
    Posts
    49

    Default Re: Client Side Conditional Style on a list control field missing

    I'm sorry David, maybe I didn't clarify it well that it's a freeform list layout.
    Here is a quick mockup component. How do I make the rows with the first name "A" have yellow background, the ones with first name "B" with lightblue background etc?
    Thanks again!

    Mockup1.a5wcmp

  13. #13
    Member
    Real Name
    Sime Atanasov
    Join Date
    May 2010
    Posts
    49

    Default Re: Client Side Conditional Style on a list control field missing

    Any luck?

    On another note, in my case I could use a quick workaround (since all "firstnames" have a same amount of records) and instead of having some "at the turn/change of the Firstname" coloring for the next group, I could use the Logicalrownumber.
    Hit another roadblock there too though: I can display {<LogicalRowNumber>} in the freeform html layout as a placeholder but I can't use it in the {*if (...)} {*else} {*endif} structure?

    I'd like to stay with the Template commands instead of going to the events, if possible.
    But, in the previous example, why this works:

    {*if (parseInt(CustAmount) > 100)}
    <div class="[theme:listBox.base.item.parts.contentClassName|{dialog.style}ListItemContent]" style="float: right; color:green;">
    {CustAmount}
    </div>
    {*else}
    <div class="[theme:listBox.base.item.parts.contentClassName|{dialog.style}ListItemContent]" style="float: right; color:red;">
    {CustAmount}
    </div>
    {*endif}

    and this does not: or some form of <LogicalRowNumber> , reference of listId etc. so we don't have > > .

    {*if (<LogicalRowNumber> > 100)}
    <div class="[theme:listBox.base.item.parts.contentClassName|{dialog.style}ListItemContent]" style="float: right; color:green;">
    {CustAmount}
    </div>
    {*else}
    <div class="[theme:listBox.base.item.parts.contentClassName|{dialog.style}ListItemContent]" style="float: right; color:red;">
    {CustAmount}
    </div>
    {*endif}

    Again, a placeholder of {<LogicalRowNumber>} can be displayed all right, but can't be used in the if statement?
    Any ideas how to ask for that value in the Template?

    Thanks!

  14. #14
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,672

    Default Re: Client Side Conditional Style on a list control field missing

    In the UX, Client-side, onInitializationBegin

    Code:
    currData = '';
    lastData = '';
    colorSwitch = 1;
    In the List Control, onItemDraw event...

    Code:
    var bgColor1 = 'red';
    var bgColor2 = 'green';
    currData = data.Firstname;
    if(lastData == '' || currData == lastData){
    	if(colorSwitch == 1){
    		ele.style.backgroundColor = bgColor1;
    	}else{
    		ele.style.backgroundColor = bgColor2;
    	}
    	lastData = data.Firstname;
    }else{
    	if(colorSwitch == 1){
    		colorSwitch = 2;
    	}else{
    		colorSwitch = 1;
    	}
    	
    	if(colorSwitch == 1){		
    		ele.style.backgroundColor = bgColor1;
    	}else{
    		ele.style.backgroundColor = bgColor2;
    	}
    	lastData = data.Firstname;
    }
    Alt_Group_Rows.PNG

  15. #15
    "Certified" Alphaholic
    Real Name
    Gregg Schmidt
    Join Date
    Mar 2001
    Location
    Milwaukee
    Posts
    1,355

    Default Re: Client Side Conditional Style on a list control field missing

    Hi David,

    I usually miss the part about list control but I think I'm about to nail it this time.
    The first image show where to do it, the 2nd image shows the results.

    2019-08-20_0-20-24.png2019-08-19_21-26-50.png

  16. #16
    Member
    Real Name
    Sime Atanasov
    Join Date
    May 2010
    Posts
    49

    Default Re: Client Side Conditional Style on a list control field missing

    Thanks David - works like a charm! I was hoping to avoid using the Event (onItemDraw in this case) and do the changes in the template. Which, of course, was not possible since the item draw changes is on the individual level, not global for the whole list. On the flip side, when I think of the way it's done, a great things that Alpha provides the granularity to control and use those different events, in js/xbasic direct code or functions.
    PS if I was up-to-date with the Alpha versions, the Kanban layout would provide more functionality for what I needed. I was watching a webinar about that, really cool stuff about moving records from one to another group.

  17. #17
    Member
    Real Name
    Sime Atanasov
    Join Date
    May 2010
    Posts
    49

    Default Re: Client Side Conditional Style on a list control field missing

    Gregg,
    in my case the client side conditional style won't work, since I can't hardcode the conditions. From the pictures: I don't know what file extensions would come up in a dynamic setting.
    That's where I could define a workaround condition by a certain field of the table, but the one that I needed ( {<LogicalRowNumber>} ) did not work.
    Thanks for the note!
    Sime

  18. #18
    "Certified" Alphaholic
    Real Name
    Gregg Schmidt
    Join Date
    Mar 2001
    Location
    Milwaukee
    Posts
    1,355

    Default Re: Client Side Conditional Style on a list control field missing

    Hi Sime,

    Sorry my solution doesn't help for your particular situation, but it was meant to be a solution for
    the original issue of this thread, which was not being able to set a client-side conditional style for
    a cell on a list control. My pictures show where to set that condition, as well as the results.

    Gregg

  19. #19
    Member
    Real Name
    Sime Atanasov
    Join Date
    May 2010
    Posts
    49

    Default Re: Client Side Conditional Style on a list control field missing

    I got it Gregg. That was new to me, as I don't use A5 frequently.
    Thanks to you, David and the other good people helping at this board. And Alpha for quickly fixing and upgrading different parts of the software.

  20. #20
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,672

    Default Re: Client Side Conditional Style on a list control field missing

    Quote Originally Posted by madtowng View Post
    Hi David,

    I usually miss the part about list control but I think I'm about to nail it this time.
    The first image show where to do it, the 2nd image shows the results.

    2019-08-20_0-20-24.png2019-08-19_21-26-50.png
    That's good if you have 3 or a few more conditions. In this case it's possible that there are 26... so I'd take a different approach. Once I see a duplication of code more than 2 or 3 times it's a clear indication that there is something else that can be done.

  21. #21
    "Certified" Alphaholic
    Real Name
    Gregg Schmidt
    Join Date
    Mar 2001
    Location
    Milwaukee
    Posts
    1,355

    Default Re: Client Side Conditional Style on a list control field missing

    Hi David,

    As I said earlier, my solution was strictly meant to solve the issue that started this thread.
    Knowing how simple copy and paste is, I would not be afraid to use this method.

  22. #22
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,672

    Default Re: Client Side Conditional Style on a list control field missing

    Quote Originally Posted by simeatan View Post
    Thanks David - works like a charm! I was hoping to avoid using the Event (onItemDraw in this case) and do the changes in the template. Which, of course, was not possible since the item draw changes is on the individual level, not global for the whole list. On the flip side, when I think of the way it's done, a great things that Alpha provides the granularity to control and use those different events, in js/xbasic direct code or functions.
    PS if I was up-to-date with the Alpha versions, the Kanban layout would provide more functionality for what I needed. I was watching a webinar about that, really cool stuff about moving records from one to another group.
    Agreed. That's one of Alpha's strengths... that you can get things done a few different ways... that you can use 26 conditional statements... or a bit of Javascript... to get needed results.

Similar Threads

  1. Client-Side List-Control Filtering
    By CarlMPearson in forum Mobile & Browser Applications
    Replies: 2
    Last Post: 10-19-2014, 03:54 PM
  2. Replies: 7
    Last Post: 07-24-2014, 04:47 AM
  3. Setting a conditional style in Client side properties
    By Atta in forum Mobile & Browser Applications
    Replies: 1
    Last Post: 09-13-2013, 05:05 PM
  4. Client side conditional cell style - ERROR: not a Function object
    By pwatt01 in forum Application Server Version 10 - Web/Browser Applications
    Replies: 1
    Last Post: 05-31-2012, 12:00 AM
  5. Client side conditional style broken
    By frankbicknell in forum Application Server Version 10 - Web/Browser Applications
    Replies: 2
    Last Post: 12-07-2010, 11:33 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
  •