Scrollable Recipe Folder Management in Web Visualization (Workaround for MpRecipeUI)

Ask Questions
1

Hi all,

I’m facing a limitation with our Web Visualization setup where we are restricted to specific scroll / navigation widgets.
In our recipe management page, I aim to implement a scrollable touch interface for folders and recipes. Currently, we’re using a outdated explorer-like control where each folder is displayed as a row, and users must select the folder and click on an arrow to open it (Screenshot 2). This switches the content to display only the recipes of that folder (Screenshot 3), following B&R’s MpRecipeUI standards.

I’m looking for a more touch intuitive approach, where folders can be expanded, and the entire window is scrollable via touch.

In the Help Explorer under MpRecipeUIRecipeListType, I found the “Scale” widget (the scrollbar), but it’s only available for VC4 and seems unsupported for Web Visualization (Screenshot 1). As a temporary fix, I’ve implemented a RangeSlider (Screenshot 3, red arrow) with binding of RangeStart + RangeEnd, but it doesn’t meet the requirement of being touchable/scrollable with its bindings, and navigation is still handled by Up/Down buttons.

I could use predefined containers like GroupBoxes with a maximum of 50 folders which are scrollable if the content is more than its page height, but unfortunately, the GroupBox limits and sizes cannot be bound to variables and I want to avoid fixed limits…

Does anyone know of a workaround similar to VC4’s Scale widget for Web Visualization, or alternative approaches to achieve this functionality?

Thanks in advance!

SysInfo:

  • AS: 4.12.5.95
  • SPS: APC2100 / APC2200
  • WebVisu: PPC / Terminal + RevPi
  • AR: H4.83/I4.93
  • mappView: 5.23.0, ACP10: 5.23.1, mappServices: 5.23.1

Screenshots
Screenshots1768×1472 138 KB

2

Hello, Manuel Tomasini,

Welcome to B&R community. Just to be clear if I got the issue right. You need a scrollable list to show a list of folder where you scroll it up and down and select.

If so, the easiest option would be just using list box, where you can bind a list of folders and the scrolling thing is already implemented. an example of how the ListBox looks on web:

image
image269×257 949 Bytes

For information about ListBox: Here

3

Thank you for the quick response.

I’ll give this a try when I have the chance, though I’m unsure if the ListBox widget will fully support the recipe management functionality we require.

I’ll update once I’ve tested its compatibility with our setup.

4

Hi Manuel, i marked your summary as a solution. But feel free to update us anytime when you find something new.

5

So as a final update, after testing the ListBox widget, we encountered the well-known limitation:
MpRecipeUISetupType allows a maximum of 20 recipes visible per page (RecipeListSize).
For instance, a folder with 100 recipes shows only the first 20, with the rest accessible only via scrolling using the standard navigation controls.

Even with MpFile, only 50 files can be visible at once.

Thus, we developed our own recipe management system based on MpFile, including features like copy/paste, filtering, and sorting.
Although this solution doesn’t offer touch-based scrolling, it meets our requirements best.

1 Like