Skip to Content
Author's profile photo Karol Kalisz

Design Studio 1.6 – View on Action Sheet Technical Component

The action sheet technical component – available only in the new main mode – will allow you to create custom context based action lists.

Example

as1.PNG

an example of Action Sheet connected to a button.

Content

The action sheet gives in this case 3 options to execute. The available items can be defined in properties. Each item can have key, text and icon.property.

ac2.PNG

Position

It is bound to a button component, by this the position can be defined in relation to the assigned component.

In the component event you have to place this script (exampe on Button):


ACTION_SHEET_1.open(BUTTON_1);

Events

There is one event available, you can use it to react on the chosen action by the user. with scripting you can access the selected key or text and with IF statements you can execute corresponding function. The scripting is then as usual.

An example of Event implementation

ac3.PNG

Where to Find?

In the technical components you can see following components. Action Sheet is one of them. Pay attention that this one is available only in the new main mode.

ac4.PNG

Summary

In cases you have previously created such action lists on your own by placing panels and buttons / labels together – this component is a good improvement fro your application.

SCN Community Content

This component relates also to the SCN community package Action Sheet Button component – Action Sheet Button 2.0 – SCN Design Studio Community. There difference between those components is in the available scripts and other properties. You can chose the one which is better fitting for you.

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Moritz Kelm
      Moritz Kelm

      Hi Karol,

      is it correct to launch the Action Sheet from the Button's "On Click" Event with the following script?

      ACTION_SHEET_1.open(me);

      The action sheet opens this way, but if it's open and I decide not to click any of the options, I intuively click the button again to close the menu. However, on click the menu opens again (new open animation). Maybe it'd make sense to implement .setOpen() and .isOpen() functions, so a button click event like

      ACTION_SHEET_1.setOpen(!ACTION_SHEET_1.isOpen());

      would be possible.

      Cheers,

      Moritz

      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Moritz,

      I would say it is correct to launch the Action Sheet from the "On Click" event of the button.  If you don't make a selection, normally the Action Sheet should be dismissed by clicking anywhere outside the Action Sheet (except on the button).

      Regards,

      Mustafa.

      Author's profile photo Moritz Kelm
      Moritz Kelm

      Hi Mustafa,

      This works just fine. 🙂 My post was just meant as a suggestion for further scripting functionality, as I expected the button to work differently when working with the application.

      Thanks for your input, best regards,

      Moritz

      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Moritz,

      It's interesting though that you've observed a new open animation of the Action Sheet when you click the button again without making a selection.  The standard UI5 behaviour is no new animation if the Action Sheet is already open, as per the UI5 Explored ActionSheet example.  Perhaps this behaviour is a quirk of the Design Studio implementation.

      Regards,

      Mustafa.

      Author's profile photo Former Member
      Former Member

      HI ,

      I have some Query on this component in on select you mentioned

      if(Action Sheet_1.getselectedvalue()== Action 1 ) .

      In above line of code Action 1 is the first item and action 2 is second item and so on..?

      Please correct me if i am Wrong

      And may i know what is the  purpose of component .how it varies from other components

      Thanks,

      Varun

      Author's profile photo Former Member
      Former Member

      Good afternoon,
      I noticed (bug) incorrect behavior of Action Sheet Button component.
      To reproduce:
      1. Create new Design Studio application.
      2. Add Action Sheet Button component (configuration is not needed)
      3. Add Input Field (standard) component (configuration is not needed)
      4. Start application, click inside Input component, press Enter button on keyboard, then menu (of ASB) will appear (It shouldn't be). I attach screenshot.

      Tested with stable version 3.0.0.201607151206. (Design Studio 1.6 SP2, local mode)

      I have been added issue on GitHub.

      Author's profile photo Neha Sri
      Neha Sri

      Thanks for the post Karol Kalisz .

      But I was facing a issue hoping you can help.

      How can we control the positioning of the Action List placement option is not helping here.

      All the list populated are hidden and going outside the window for some of the values of the same dimension where as others are fine.

      p.s :  I was trying to change the dimension of a info chart from populating Action List.

       

      Regards,

      Raven