So in the left pane I have various folders which show a table row count.
How would I go about creating a task which refreshes the counts on them? The timer seems too slow and I want to refresh the counts after certain events.
Refreshing on an event is possible, but it depends on where your event is raised. If it originates from a UI screen and you have only one web client block, you can use UiEvents as described in the docs. If the event is from middleware or you have multiple web blocks and you want to notify all of them, use the Global Events add-on.
Thanks Konstantin, it looks like that is what I need. But struggling to get it to work.
I am now receiving the events in the web module from the core entity listeners. Now how do I get the folder app counts to refresh? What I am trying is:
You are invoking a service, but it doesn’t help to refresh the UI component. In fact, the service is used by the component, and you need to invoke refresh on the component.
Unfortunately, the public API of the component provides only the refreshFolders() method which refreshes the whole content, which is excessive for your task. So better obtain the underlying implementation and invoke the same method which is normally invoked by the timer:
It’s sort of working now. It seems to work correctly if invoked from the “OnAfterInsert” listener but not on the “OnAfterDelete” listener for some reason.
However it only prints the first log “Application Folders Update Bean”. It does not print the second one “Application Folders Update Finished”. It refreshes the folders when invoked by onAfterInsert but not when invoked by onAfterDelete (at least there is a significant delay on after delete).
Seems a little buggy…
Actually…
It is working, but the values do not refresh instantly unless I e.g. manually resize the folders pane etc.
Do I need to add another step? e.g. do I need to redraw the folders pane somehow or something? How would I refresh the folders pane to show the updated values?
Try to deliver the event right to the main window: implement GlobalUiEvent in your event, extend the main window and add event listener to it. You don’t need any authentication then, also FoldersPane can be obtained right from this.
There seems to be a bug somewhere in the AppContext.withSecurityContext(new SecurityContext(systemSession), () -> { thread but there is no error message or anything posted so I cannot figure out what it is…
I thought I would note I am trying to receive this in the [app-web] module from the [core] module listeners.
Change the folder icon depending on whether there are results in each folder count. e.g. I was thinking about putting green and red “lights” as the folder icons.
Change the folders panel icon (arrow) color if any of the folders have a count. e.g. have it green if no count, red if count.
Change the name of “Application Folders” to something else.
For folders, it’s possible by setting a value to the style variable in Count script. See the docs.
For the other elements, you can try to set an appropriate style to the FoldersPane component when reloading folders, and write CSS that will use this style for for the component elements.
Then we have to find correct combinations of space glyphs that will divide tree arrows and item icons to avoid icon glitches. I’ve found that we can use "\2003" "\2009" combination for collapsed and "\2003" for expanded items. This difference exists because the arrow icon takes more space for expanded item than for collapsed.
After spaces we can put our icon. I’ve chosen the cog (or gear) icon. Its code is "\f0c1". And the last thing is to increase a width of ::before elements.
Final style:
.v-tree-node-expanded > .v-tree-node-caption > div::before {
// disable transformation to display icons in a row
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.v-tree-node.cog > .v-tree-node-caption > div::before {
// the hardest moment - combine space characters to avoid icon glitches
// values: arrow, two spaces, FA link icon
content: "\f0da" "\2003" "\2009" "\f0c1";
// override default width to place both icons
width: $v-unit-size + $v-unit-size / 6;
}
.v-tree-node-expanded.cog > .v-tree-node-caption > div::before {
// the same moment with spaces
// values: arrow, one space, FA link icon
content: "\f0d7" "\2003" "\f0c1";
// the same
width: $v-unit-size + $v-unit-size / 6;
}
Thank you for your reply. However that does not seem to modify anything for me and I’m not sure you understood the question? I am trying to change the icon depending on the search result. So I have .c-folders-pane .v-tree-node.red if there are results > 0 from the query and .c-folders-pane .v-tree-node.green if there are no results.
What I have tryed in my scss:
.c-folders-pane .v-tree-node.red {
font-weight: bold;;
color: red;
}
.c-folders-pane .v-tree-node.green {
color: #32a73a;
}
.v-tree-node-expanded > .v-tree-node-caption > div::before {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.v-tree-node.cog > .v-tree-node-caption > div::before{
// the hardest moment - combine space characters to avoid icon glitches
// values: arrow, two spaces, FA link icon
content: "\f0da" "\2003" "\2009" "\f0c1";
// override default width to place both icons
width: $v-unit-size + $v-unit-size / 6;
}
.v-tree-node-expanded.cog > .v-tree-node-caption > div::before {
// the same moment with spaces
// values: arrow, one space, FA link icon
content: "\f0d7" "\2003" "\f0c1";
// the same
width: $v-unit-size + $v-unit-size / 6;
}
The font colors are changing based on .c-folders-pane .v-tree-node.red and .c-folders-pane .v-tree-node.green but the icons have not changed with your suggestion. I would rather have a red/green icon than change the color of the text (see my pic in my previous post).
Maybe the problem is that I don’t need the tree functionality in my app folders?
And one other thing. How can I remove the selected table row styling? I don’t want it to change when a folder is selected (i.e. the background and font colors to change)