How i add progress bar in serenity is core?

[SebnemSeymen]

I have a page where I define a campaign. I want to follow how far they have progressed by listing the companies participating in the campaign. How can I add Progress Bar, I couldn't find any source. I'll be happy if you can help me.

What I want to do is to add the company name in the list and a progress bar next to it.

[LSNicholls]

Well, I'm not 100% sure what you are trying to accomplish -- a picture would help -- and this is the kind of thing that is probably easiest to do in a report. But here is a suggestion.

I will be using the Employees table in Northwind to represent the Companies in your Campaign.

For the purpose of this example, let's say that the Campaign Goal is 10000. We will use the Extension value for each Employee as the progress towards that goal. We will use the Employee's Last Name as the Company:

... so, for this example, we can get a percentage-towards-goal for each row like this:
(Extension/10000.00 )* 100 as ProgressPercentage

... we can get a number of blocks in the progress bar like this:

ceiling(((Extension/10000.00 )* 100 )/5) as NumberBlocks

.. and we can get a progress bar using a unicode block character, based on that percentage, like this or similar:

`replicate(nchar(9608), ceiling(((Extension/10000.00 )* 100 )/5)) as Blocks

... so now we can make Blocks a column in our *Row.cs, like this:

        [DisplayName("Progress"),
            Expression("replicate(nchar(9608), ceiling(((Extension/10000.00 )* 100 )/5)) ")]
        public string Blocks
        {
            get => fields.Blocks[this];
            set => fields.Blocks[this] = value;
        }

... and the result will look like this (I include the extension for each employee so you can see that the expression for progress is working as expected). It looks pretty good and is even sortable:

You can further prettify this by using the *Grid.ts getItemCssClass method to change the color of the bar according to some metric thresholds, like a KPI.

Maybe this will help -- if not, be a little clearer on what you are trying to do in your response, and maybe somebody will have a different idea to help you! Again, an annotated image would probably help give us the idea.

It's possible, for example, that you are just trying to create ONE vertical bar (like a thermometer) representing how much money you have collected towards a goal or how many companies out of a total number of companies have participated. Vertical is a little harder than what I showed you, but possible. And obviously, if you only one ONE horizontal bar on the page, representing overall progress rather than per-row progress, you can use a variation on the trick I just showed you.

[LSNicholls]

@sapster77

background-color

No, I don't think that would be right, although I'm not checking thoroughly right now. Look at the expression; you're trying to color the bar, right? And in this solution, the bar is the foreground (replicated characters), not the background. Try using text-green, text-red, and text-blue as your classes depending on conditions, and you should probably see what you are expecting.

Also, I don't think this is really what you will want to do, because just using getItemCssClass like this is going to color all the text in that row, not just that column. You may not notice this effect if all the other text items are hyperlinked, but it's there.

To only color the bar, that one column, and to do it conditionally, takes a little more work.

Of course, if you don't mind coloring all the text in that row, that is okay too :-)

Sorry again -- I have to edit this because I just realized you asked me " whats does the string output look like?". Look at the screenshot in my first response in this thread, and you will see. Better yet, write a SQL statement that includes it, and look at the output. What I'm doing is simply putting in a varying number of blocks depending on whatever metric you are trying to use for the progress bar, understand this?

Meanwhile, how do you translate this into the proper condition where you have ??? in your getItemCssClass?

There are two ways:

1 - look at the length of the value, which is basically "how many blocks"; or
2 - look at a different value, either the actual metric value that is the source of your decision of "how many blocks" in this one, or an additional column you use specifically for this purpose.

Either way, you're basically creating a KPI and you will have to figure out what the cutoff points are for each color.

I can explain how I do this without hardcoding a bunch of if/else in the getItemCssClass method, which isn't very difficult, but first I would like to know whether I am correct in my previous suggestion that you should only color this bar, and not all the text in the row, because it might be easier to explain both at once.

[sapster77]

Gotcha.
No you are of course correct - I only want to color the bar, not the row.
I have an additional column (called TotalFactor) that I use to get the metrics for the Progress column.

So yes, you are correct in your previous suggestion, and I would be very grateful for an explanation on how to do this.

[LSNicholls]

OK, I'm happy to do that.

First, you're going to add a CssClass to the ProgressBar column in your Columns.cs file. Don't worry, I know this will apply it to the ProgressBar cell for every row equally. No problem.

[CssClass("myapp-progressbar")]

Second, your site.css file is going to have instructions that require TWO classes each. Here is an example with three possible states for the KPI:

.myapp-progressbar-1 .myapp-grade {
  color: darkred;
}
.myapp-progressbar-2 .myapp-grade {
  color: steelblue;
}
.myapp-progressbar3 .myapp-grade {
  color: mediumseagreen ;
}

Third, your method in the grid class is going to selectively apply the SECOND of the two classes, based on your metric. If your TotalFactor is an enum, you can even avoid any branching logic, like this:

  protected getItemCssClass(item: QualRow, index: number): string {
      let klass: string = "";
      var rval = item.TotalFactor
      var rklass = " myapp-progressbar-" +  rval.valueOf().toString() ;
      klass += rklass + ' ';

      return trimToNull(klass);
  }

... since I gather TotalFactor is an actual number, instead of the line var rval = item.TotalFactor above, you will need to add code to assign a value to rval as the suffix for the second class by considering various cutoff points for TotalFactor. Obviously the suffix doesn't have to be the numbers 1, 2, and 3; your class names and the matching logic here could assign words like "low", "medium", and "high" to rval, as long as the classname suffixes match properly.

So, now, your cells in the progress bar column always get the "myapp-grade" class, and provisionally get one of the other classes, and each cell has to have both to get the color, see?

And then, of course, you will probably find yourself needing to do something similar in your Dialog class if you allow a dialog for this list of items.

[sapster77]

Perfect! Thank you for your time - got it working already:-)
Again I learned a lot on how I can modify things and probably use this in other use cases as well.

[LSNicholls]

So glad to hear that! this type of conditional formatting is obviously useful in many contexts.

[LSNicholls]

@sapster77 sorry I didn't mean you should literally put in "as int?". Notice that part wasn't all in code format!

I was just making sure you knew what the data type should be for this example data, because I wasn't putting all the lines in for declaring this new column in the row.

The full instruction for the new column should look like the Id column in the same LanguageRow.cs file; in other words:

   [DisplayName("Language Progress"), Expression("Len(LanguageName)*4")]
   public int? LanguageProgress
   {
       get => fields.LanguageProgress[this];
       set => fields.LanguageProgress[this] = value;
   }

... followed further down in the same file by this (again, similar to Id):

public Int32Field LanguageProgress;

Does that make more sense? Sorry I was a bit lazy before!

Anyway doing this "vanilla" test maybe gets us closer to what is wrong. And btw I don't think you are "stubborn"; it is good to understand how things work. I personally don't like the idea that anything in software is "weird"; there is always an answer, and we should not give up. (Even though I still like the idea of my alternative solution, which comes from years of having to do stuff like this in reporting environments, fyi.)

I think the fact that you had to move the "format" import is a clue, because these things move around in different versions of Serenity framework code. So, there is something different in your generate/build processing than ours.

So, let me ask you this:

My generated ServerTypes\Administration\LanguageColumns.ts file has these lines:

import {ProgressBarFormatter } from "@/Administration/Language/ProgressBarFormatter";

and

[ProgressBarFormatter]; //referenced types

Does your file have these lines?

Note: I am not suggesting that you hand-edit the generated file. We just want to know if for some reason your generate/build processing isn't picking up on your formatter.

[sapster77]

I makes sense - I understood what you meant and it was also the way I did it:-)

I also thought i was weird that the import (with the "q") had to be moved, but it does not give an error. It is however also the only thing that is different in this formatter compared to the other ones i have (which works) - they dont have a "format" import. Only formattercontext and and formatter.
Yes - that file also has the these lines.

[LSNicholls]

Access to "format" shouldn't be essential, if it was really causing a problem, you could get rid of it simply by changing the return line in wezmag's code to concatenate a bunch of strings instead of using the {0}, {1}, and {2} placeholders if you wanted.

[sapster77]

Copy.
I just got another "thought" which might be worth noting. I am currently using a windows 11 surface pro with an ARM processor. I have read somewhere that there can be problems with Node.js on ARM and in the Serenity docs is states that node.js is what is used or typescript files and ES modules, which i guess i exactly what I am working with here. The other working formatters i have were made on a standard Win10 computer.

I am also seeing now, that if I make a change to any grid.ts file, like changing a name of a button, the change is not propagated to the .js file and hence no change happens to the button in the UI. If i "manually" make the change in the XYZGrid.js file, the change works.

So basically something is "fishy" with node.js and therefore I am going to continue with your format example, until I can test the other formatter out on a Win10 computer (no ARM).

[LSNicholls]

Wow. If you can verify this (everything works fine on the other computer) and if you are sure that the grid.ts problem is what you think it is, this would be having a separate thread about. I know as little as possible about the way these files are generated, and you would want to bring this to the attention of the right people here.