170
Views
6
Comments
Solved
How can i set a condition on a icon to change its display based on its position
Application Type
Reactive
Service Studio Version
11.54.12 (Build 62475)

Hello everyone, I'm currently stuck on what i think is a very simple problem, i have a web block that acts as a timeline, with a circle icon acting as a image that will represent the current entry on the timeline as well as changing color based on a previous sate on the timeline. IE, if latest position, be a solid colour, if a previous color, be foo bar. 

I have a condition on the icons style class but cant seem to get it to apply, below are my screenshots, any and all feedback on this would help. 

current style class that is used in the icon container

boolean that toggles hidden line

input parameter that defines the colour. 

Source of webblock within our library module that has a dependency to the frontend module. 

This is a piece of code that's taken from another application so its possible that im overlooking something, but i was planning to place a condition somewhere (not sure where to put it) thats the following: 

If(List.Current.Position = 1, "circle", "circle_o")

I am rather lost, any help would be great, thanks. 

UserImage.jpg
Morgan Kemp
Solution

I ended up going with one of the built in timeline widgets for outsytems that contained the built in conditions for the things that i needed, thanks for all of your feedback though. 

2021-09-06 15-09-53
Dorine Boudry
 
MVP

Hi @Morgan Kemp ,

Not entirely sure yet what the exact desired behaviour is, and where the knowledge resides on whether it is 'current' or 'past'.

So, is this webblock only representing one single event on a timeline, or a full timeline with many items.  It looks like the first to me, cause in your tree, I don't see any type of repetition (like a list).  If so, maybe rename it to TimeLineItem, If not, you still need to add that list somehow, both in input as in the widget tree.

I would actually expect you to have another block, representing the timeline, and then have either statically or dynamically several of this timelineitem block in it.  So, need clarification on that.

But assuming this block doesn't know the full list, only the single timeline item it is supposed to represent, then it would need an extra input parameter, some boolean IsLast, and then you can use that boolean, maybe in an If, and have one version of the icon 'circle' in the true, and one version 'circle-o' in the false.

Dorine

2021-09-06 15-09-53
Dorine Boudry
 
MVP

and of course, if you want to alter other styling dependent on whether it is last or not, you can do that same thing as your example for the  for the showing or hiding of the line :

If(IsLast, "timeline-item-last", "timeline-item-earlier")


UserImage.jpg
Morgan Kemp

Hi Dorine, apologies for the convoluted post, essentially all I'm trying to do is show that the first entry in that list web block have its icon be represented with a normal icon, and have all subsequent entries of that timeline, be a different icon. 

So having the first icon be "circle", and all subsequent icons being "circle_o". The web block itself would be inserted into a list widget on any front end, as I'm building a backend application that other devs within my company can refer to for our standard web blocks, most of the mutability of these blocks would be done in a per application / per module basis, therefore I'm trying to keep the functionality of this to a minimum. however, for demoing purposes i need it to actually represent what it intends to do within these applications. 

2021-09-06 15-09-53
Dorine Boudry
 
MVP

So each icon is a webblock right ?

So inside your webblock : have a IsFirst boolean input, and have in If widget looking at that boolean, In the True, have the full icon, in the False have the open icon.

Then for every consumer of that webblock, let's say they have a list, and use that webblock in the list, they can fill that boolean with something like "<yourlist>.CurrentRowNumber = 0"


2021-09-06 15-09-53
Dorine Boudry
 
MVP

But if you want to make something generic that is business agnostic, I wouldn't call it IsFirst, that is just one of the uses, maybe you have teams that want to emphasise the last, or those items with an active status, or all that are in the future or .... So I would call that boolean IsFullIcon, or something.

UserImage.jpg
Morgan Kemp
Solution

I ended up going with one of the built in timeline widgets for outsytems that contained the built in conditions for the things that i needed, thanks for all of your feedback though. 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.