Buttons - icons and visibility

Qodly Qodly Studio
1

I’m starting to optimize my user interface.

One area of interest are buttons. I have several questions:

  • The documentation speaks of icons for buttons. I cannot fine the proper spot in the properties list to pick an icon as indicated in the documentation’s screenshot.

  • Secondly, I would love to show and hide buttons depending on the context or user access rights. How do I do that? Do I have to put my menu structure in several webforms or how do I accomplish that?

Any help is appreciated.

2

Hi Tilman,

Regarding your first question, you can add an icon to a button by selecting one from these four options:
image

As for your second question, I’m not sure, but I hope it’s possible! :pray:

1 Like
3

Hello Tilman!

Exactly! In order to display icons, you should first choose your icon position in the button, then click on the icon, and select the one you want to use.

For the second question, you can give your component a serverRef, and call a function, where you do checkups on the privileges given to the connected session, and then hide and show that component.

image

In the following example, we check whether the current session has as privilege the manageRessources one, if that’s the case we display the component named “displayForAdmin”, by removing that css class:

image

4

The icon issue is resolved, thank you. I’d love to see more icons for typical UI use, like create, edit, delete etc. There are some, but they are not always having the same design language.

As for the visibility, it looks fine, but I wonder where I attach the function. Which class do I need to use?

Anyway, thanks for the super quick answer!

5

since we don’t have exposed user class functions, yet, and methods can’t be exposed, either,

  • you can put them in the dataStore class
  • i created a “fake” dataclass - it’s just a dataclass with only the ID attribute, and then a number of functions attached that i call for general purpose things like this.
1 Like
6

Cool, thank you. That will work.

7

Hello Fadwa,

In the example you provided, we are simply hiding the element using CSS, so there is nothing preventing the user from re-displaying the element by modifying its style. Doesn’t this pose potential issues?

8

What are you proposing for the behavior? I’m just curious, of course. I don’t know if I have ever thought of a different mechanism in a C/S or web app for managing hiding and showing objects.

9

Hiding buttons based on permissions is advisable at the moment.
In a near future, there will be ways to do such thing better.

Anyways, to fully protect your app, don’t forget to setup permissions on function execution. Otherwise, button or not, a clever (authenticated) person still can run your rest queries.

1 Like
10

In many back-end languages, it is possible to modify the HTML file before display.
It would be beneficial to have the ability to delete (not hide) a designated element, perhaps identified by its server-side name, in the Qodly code using a .delete() method, for example.

It would also be advantageous to potentially dynamically add pre-constructed components during page display, which we can prepare ourselves in the “Crafts” category of components.

But currently, with Fadwa’s example, if we want to block the use of the button, we simply need to check the user’s permissions before performing the button’s action. This solution will work well in this case.

1 Like
11

You don’t even need to check anything.

  • Let’s imagine a function called myFunction
  • Let’s imagine you setup the role & privileges as follow: the privilege priv1 has the permission to execute myFunction, but the privilege priv2 does not
  • If a user with privilege priv2 tries to execute myFunction, either through rest or via a webform UI, Qodly server will reject it by itself. And you can have a toast showing up for this.

The only decoration you need is in case you want to hide this button from the UI, depending on users privileges. This can currently be done with an onLoad event.

2 Likes
12

Thank you for your clarification and the great support across my different topics!