Example Code

Custom Popup Dialogs for WebVI (SweetAlert)

Products and Environment

This section reflects the products and operating system used to create the example.

To download NI software, including the products shown below, visit ni.com/downloads.

    Software

  • G Web Development Software
  • LabVIEW NXG
  • LabVIEW NXG Web Module

Code and Documents

Attachment

Description

This library shows an example of how to use sweetalert2 which describes itself as "a beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes."

See the kitchen sink demo

Some features include:

  • Zero / One / Two Button
  • Allows HTML title, content, footer (handy for links)
  • Icon, animations, backdrop, position, timeout
  • Prompt field (configurable for text, email, password, number, tel, textarea, url, selector)
  • Progress steps ie step 1 of 5

Also supports creating toast-style notifications:

 

Configure the dialogs using just your LabVIEW skills. For even more control get creative with custom CSS. Includes an example of creating a re-usable library for sharing dialog stylesheets between WebVIs.

 

Changelog

Release 3 - Support for G Web Development Software 2021

Release 2 - Support added for selector dropdowns

Release 1 - Initial release

 

 

 

 

 

 

 


Milan

Example code from the Example Code Exchange in the NI Community is licensed with the MIT license.

Comments
Mike1979
Member
Member
on

This is a really nice set of popups. Is it able to support a popup with a drop down menu?

MilanR
Active Participant
Active Participant
on

Hi Mike1979! Yep, the SweetAlert library does support drop down menus via the selectors feature. I added a VI that lets you configure a selector input type in Release 2.


Milan
twoj
Member
Member
on

Hi. MilanR.

 

 

I'm studying the Prompt function with code you posted., is there any way to configure this with multiple text-boxes? For example, a modal popup of JavaScript, etc.

MilanR
Active Participant
Active Participant
on

Hi twoj,

 

Unfortunately the underlying sweetalert2 library does not have built-in support for multiple inputs. I would recommend using the progress indicators with sequential popups to request multiple input values.


Milan
Contributors