How to create a pop up window?

Support, Troubleshooting, & Help
1

I need to pop up a window when operator clicks button or auto pop up the window when data check failed?

Image 2804
Image 28041394Ă—663 22.6 KB

2

Hi @TaylorTian, this is a fantastic question. Tulip doesn’t have a “pop-up” feature, but designing experiences that feel and perform like popups is easy.

That said, I’m not sure you’ll be able to do this using a form step. My first suggestion would be to build this functionality on a traditional layout using input widgets that correspond to the form step fields you’re asking a user to fill out.

Here’s the technique:

How to create Pop-ups in Tulip

Pop-ups in Tulip are achieved using two steps. The first step is step you'd like your "pop-up" to appear on. The second step is a duplicate of the first, with UI widgets placed on top of the user interface to resemble a pop-up. To create this experience, any user event that should trigger a pop-up should navigate to the second step with the pop-up features, and navigate back when a user has completed any required actions.

Example

Let’s say I have a simple QC step where an operator needs to approve a finished part. It looks like the following:

Screenshot 2023-06-02 at 10.11.00 AM
Screenshot 2023-06-02 at 10.11.00 AM1920Ă—1180 97.9 KB

I want a user to confirm, using a pop-up, that they’ve approved an assembly. To do so, I’ve created as second step with the following features:

Screenshot 2023-06-02 at 10.15.46 AM
Screenshot 2023-06-02 at 10.15.46 AM1378Ă—864 115 KB

The effect here is one that feels exactly like a pop-up, even though we’re using two different steps in practice.

We also cover this technique in our User Interface Design course in Tulip University if you’d like to see how we do in a video.

3

@John Is there any better way to do this? Duplicating a step requires changes made to that step to be made twice, which is really complicated and inefficient. I can’t believe that a simple pop-up for confirmation has to go through such complex method.

4

I choose between two options, depending on the use case.

  1. A new step, but I don’t copy it, I just make it a grey background. (For Maintenance reasons, and to prevent users changing data by navigating with Tab.)

    • I strongly advise against copying the step (as background)!

  2. A Custom widget that simply pops a

confirm(message);

with a given message and returns the user input (OK or Cancel)
→ The layout and position is Browser default. So it appears differently on different browsers / devices…

1 Like