Using me in scripting

When you script in any component you will find the keyword me in the content assistance which you can access by pressing CTRL-SPACE.

The keyword me is a special kind of keyword that refers to the component in which the script is run. So the value of me depends on where you at. For the JavaScript people this looks a lot like the keyword “this”.

The keyword me is very useful when you want to pass the current component as a parameter to a central script function. One of the main advantages is that you now can copy the component and the script is still valid. “me” in the new component refers to that component. Not the first one.

How to use

Suppose you want a fancy menu with a selected item and unselected item. The menu bar could look like this

    img 1: example application

To create the layout we use two grid components. The outer one with 2 rows, the inner one in the top row with 6 columns.

    img 2: layout application

For the buttons we create two CSS classes. selected and unselected. The CSS you will find in the text attachment.

Now we will create a function that takes the clicked component and an array of all the menu items to set the CSS classes accordingly.

    img 3: Global Script Function

In the script function you see that we first loop through all the elements in the parameter array MenuComponents to set the CSS to unselected. The second step is then to set the CSS of the component that was passed via the parameter SelectedComponent.

And now we come to the point where me is useful. In each button we want to pass the current button as SelectedComponent to the function. And the complete set as an array.

We can do this with the following script line :

var menuItems = [MENU_1, MENU_2,MENU_3, MENU_4,MENU_5, MENU_6];
LAYOUT.setCSS(me, menuItems);

We can copy the script across all the six menu items without having to edit the script. Ideally you would want to make the variable array menuItems global so that you only have to define that once, but that is not possible yet.

Is there a way of overdoing this?

Yes I can think of a way and I’m glad you asked J

Using Karol Kalisz dynamic components  Make your Application Dynamic!

(with a little tweaking) you could retrieve the name of the component as a string. This string value you can use to filter a datasource. The datasource holds a set of property values.

You collect those properties and apply them to the component. That would lead to some extreme masterdata driven applications that can be maintained in tables.

Conclusion

The keyword me is only a small addition, but one that has many usecases. In JavaScript the equivalent this keyword is used very often. When you call central functions you can pass the current component as a parameter using this keyword.

Added note:

Xavier Hacking pointed out to me that the keyword this also exists in Design Studio script. It does the same thing as the me keyword.