How to config once user finishing inputing the words in textbox , it popup windows.

Hi, there,
How to config once the user finishing  inputing the words in textbox , it popup  window  let users select the correct record . 

Hi Jack,

Do you mean something like Auto-Complete? If so, you can check Input_AutoComplete from the RichWidgets module that comes with the platform.

Jorge Martins wrote:

Hi Jack,

Do you mean something like Auto-Complete? If so, you can check Input_AutoComplete from the RichWidgets module that comes with the platform.

Hi jorge,

Thank you ! not autocomplete , popup window, let users check ,like bollinball popup ,but it trigered by link or button ,now i need it trigered by input finished



Solution

A Popup_Editor requires a Link or Button with method navigate to open a popup window (you can find a detailed explanation here).

The short explanation, with an additional first step, is:

  • Create a Container and:
    • Set its Display property to False;
    • Drag a Link/Button inside the container and:
      • set its Name property to, for instance, NavigateToPopup;
      • set its Method property to Navigate and;
      • set its Destination to the Screen that defines the popup's contents.
    • Drag a Popup_Editor widget next to NavigateToPopup (still inside the Container);
      • Set the LinkOrButtonWidget property to NavigateToPopup.Id

This prepares your popup to be shown when you click on the link/button, and hides that button, so that users don't click on it.

There are two ways to then trigger the popup from your Input widget:

  1. You can go the OutSystems way:
    • define a Screen Action ShowPopup that you assign to the OnChange event of your Input widget;
    • In that Action's Flow:
      • Drag the Widget_Click Server Action (from the RichWidgets module, if you don't see it you may need to go to Manage Dependencies...)
        • Set the WidgetId property to NavigateToPopup.Id
  2. Or the Javascript way (less maintainable):
    • Add a new Extended Property to your Input widget:
      • Set its Name property to "onblur" (you can choose it from the dropdown, iirc)
      • Set its Value to "$('#" + NavigateToPopup.Id + "').click();"
Solution