Announcement

Collapse

The Alpha Software Forum Participation Guidelines

The Alpha Software Forum is a free forum created for Alpha Software Developer Community to ask for help, exchange ideas, and share solutions. Alpha Software strives to create an environment where all members of the community can feel safe to participate. In order to ensure the Alpha Software Forum is a place where all feel welcome, forum participants are expected to behave as follows:
  • Be professional in your conduct
  • Be kind to others
  • Be constructive when giving feedback
  • Be open to new ideas and suggestions
  • Stay on topic


Be sure all comments and threads you post are respectful. Posts that contain any of the following content will be considered a violation of your agreement as a member of the Alpha Software Forum Community and will be moderated:
  • Spam.
  • Vulgar language.
  • Quotes from private conversations without permission, including pricing and other sales related discussions.
  • Personal attacks, insults, or subtle put-downs.
  • Harassment, bullying, threatening, mocking, shaming, or deriding anyone.
  • Sexist, racist, homophobic, transphobic, ableist, or otherwise discriminatory jokes and language.
  • Sexually explicit or violent material, links, or language.
  • Pirated, hacked, or copyright-infringing material.
  • Encouraging of others to engage in the above behaviors.


If a thread or post is found to contain any of the content outlined above, a moderator may choose to take one of the following actions:
  • Remove the Post or Thread - the content is removed from the forum.
  • Place the User in Moderation - all posts and new threads must be approved by a moderator before they are posted.
  • Temporarily Ban the User - user is banned from forum for a period of time.
  • Permanently Ban the User - user is permanently banned from the forum.


Moderators may also rename posts and threads if they are too generic or do not property reflect the content.

Moderators may move threads if they have been posted in the incorrect forum.

Threads/Posts questioning specific moderator decisions or actions (such as "why was a user banned?") are not allowed and will be removed.

The owners of Alpha Software Corporation (Forum Owner) reserve the right to remove, edit, move, or close any thread for any reason; or ban any forum member without notice, reason, or explanation.

Community members are encouraged to click the "Report Post" icon in the lower left of a given post if they feel the post is in violation of the rules. This will alert the Moderators to take a look.

Alpha Software Corporation may amend the guidelines from time to time and may also vary the procedures it sets out where appropriate in a particular case. Your agreement to comply with the guidelines will be deemed agreement to any changes to it.



Bonus TIPS for Successful Posting

Try a Search First
It is highly recommended that a Search be done on your topic before posting, as many questions have been answered in prior posts. As with any search engine, the shorter the search term, the more "hits" will be returned, but the more specific the search term is, the greater the relevance of those "hits". Searching for "table" might well return every message on the board while "tablesum" would greatly restrict the number of messages returned.

When you do post
First, make sure you are posting your question in the correct forum. For example, if you post an issue regarding Desktop applications on the Mobile & Browser Applications board , not only will your question not be seen by the appropriate audience, it may also be removed or relocated.

The more detail you provide about your problem or question, the more likely someone is to understand your request and be able to help. A sample database with a minimum of records (and its support files, zipped together) will make it much easier to diagnose issues with your application. Screen shots of error messages are especially helpful.

When explaining how to reproduce your problem, please be as detailed as possible. Describe every step, click-by-click and keypress-by-keypress. Otherwise when others try to duplicate your problem, they may do something slightly different and end up with different results.

A note about attachments
You may only attach one file to each message. Attachment file size is limited to 2MB. If you need to include several files, you may do so by zipping them into a single archive.

If you forgot to attach your files to your post, please do NOT create a new thread. Instead, reply to your original message and attach the file there.

When attaching screen shots, it is best to attach an image file (.BMP, .JPG, .GIF, .PNG, etc.) or a zip file of several images, as opposed to a Word document containing the screen shots. Because Word documents are prone to viruses, many message board users will not open your Word file, therefore limiting their ability to help you.

Similarly, if you are uploading a zipped archive, you should simply create a .ZIP file and not a self-extracting .EXE as many users will not run your EXE file.
See more
See less

Client Side Conditional Style on a list control field missing

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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
    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, 01:09 AM.

    Comment


    • #3
      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, 01:11 AM.

      Comment


      • #4
        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.

        Comment


        • #5
          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.

          Comment


          • #6
            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".

            Comment


            • #7
              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?

              Comment


              • #8
                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.

                Comment


                • #9
                  Re: Client Side Conditional Style on a list control field missing

                  Perfecto! Thanks!

                  Comment


                  • #10
                    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.

                    Comment


                    • #11
                      Re: Client Side Conditional Style on a list control field missing

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

                      Comment


                      • #12
                        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

                        Comment


                        • #13
                          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!

                          Comment


                          • #14
                            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

                            Comment


                            • #15
                              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

                              Comment

                              Working...
                              X