closed
Public

I want to create a popup after a button click, I need this popup to have scrollable list along with two buttons. I couldn’t really find anything specific component wise to a popup. Do I have to use window component and then try to have a list element in it? I saw some popup components but they were for confirmation and notifications. Can someone direct me to a right resource? Thanks

5 answers

Hi varun,

Actually any element can be used as a popup, as long as you hide it initially and give it the highest Z value.

For example, you can use a Rectangle as popup:

Then place a Scrollable Container and two buttons on it (also set to invisible and highest Z value), then embed a list into the Scrollable Container.

Here is how to show the popup:

Checking the “Include elements within the area” checkbox will show/hide the scrollable list and the button with rectangle together.

Of course, if you group the rectangle, scrollable container and buttons together, you can just show/hide the entire group without checking that checkbox.

#1

Xavier,

Thanks for always coming to rescue. What I did was sort of the approach based on a previous question I had asked, basically I took the rectangle pop up and had it another page with the previous page as a master page. I think I could achieve what I was doing but I think getting all the components together was sort of a major work and I think generally their are components within a pop up which are always constant like a cancel ( cross icon) on top right edge of the pop up window and a generic title of the popup. So there were things which I felt I was recreating in this pop up which are always present in a popup. Would have been nice if you guys had a generic pop up which had all these basic features of a pop and the users like me could just add things to this pop-up to customize the way we want it. Maybe you have a way of doing it and I just don’t know of it. 🙂

Secondly I am trying to use a progress after a user clicks on the add button. On clicking the add button I would like it to be linked to another page and while it is transitioning to another page a moments pause. During this moment’s pause the progress bar comes up ( determinate progress increasing) and then the user sees the final destination( the new link). I really hope I don’t have to create a new page just for this progress bar 😉 Any help on how to get this interaction? I checked the online documentation and it just had 3 points explaining the 3 properties of the progress bar and not a demo of its usage. Thanks

#2
  1. Also can their be some sort of message associated with this progress bar like adding groups please wait?

Hi varun,

You can actually create any kind of popup and save them as custom element for future usage. I just shared one of my examples in the community: http://www.foreui.net/node/97

As for the progress bar, it is really weak at the time. If you need an interactive progress bar, you will need to create multiple instances of progress bar, set them to different progress, overlap them and control their visibility. Here is an example: http://www.foreui.net/node/35

If you need a text on the progress bar, you will need to place a text box over it, at least for now.

We will improve the progress bar element in V3.0. We will allow controlling progress bar via actions and set its text dynamically.

#3

Hey Xavier,

This question was sort of related to this post so thought of asking here itself. I having a popup which I have kept invisible on a page, then once a user clicks a button I want this invisible pop up to become visible. Is it not possible to do this if I have as a part of action

1. Element Clicked

1.1 Conditional branching [Button_95.clicked] == true

Yes( pop up visible)

No ( pop up invisible)

I know we can have Button_95.selected as a option but I am not able to figure out if there is a equivalent command for clicked like I showed above. For me with clicked it doesn’t works and selected is also not equal to clicked. I really would hate to make another page just for this pop up as my prototype is reaching a large number of pages and some of the actions have been repeated just for the prototype. So it would save me a lot of cluttering if I don’t have to make a new page or master page for small modifications. Thanks

#4

Hi Varun,

If you are using Button to show/hide popup, the solution is quite straightforward:

If you are using CheckBox, you can do this:

#5

This question is now closed