Popup

A popup dialog is created with <tc:popup/>. It can be filled with other components.

The popup dialog is based on the Collapsible concept.

Tag Library Documentation: <tc:popup/> | <tc:operation/>

AJAX popup

The following example shows a popup that contains a required input field. Popups are opened and closed via the <tc:operation name="show|hide" for="[ID]"/> tag. When used with AJAX, the component must be rendered and executed in order to transfer the new operation value. In this example, the <tc:message> tag of the page is also rendered to show possible errors.

The example will work as well if the <f:ajax> tags are removed.

<tc:button label="Open AJAX popup">
  <f:ajax execute="ajaxPopup" render="ajaxPopup :page:messages"/>
  <tc:operation name="show" for="ajaxPopup"/>
</tc:button>

<tc:popup id="ajaxPopup">
  <f:facet name="label">Popup (AJAX)</f:facet>
  <f:facet name="bar">
    <tc:link image="bi-x-lg" immediate="true">
      <f:ajax execute="ajaxPopup" render="ajaxPopup :page:messages"/>
      <tc:operation name="hide" for="ajaxPopup"/>
    </tc:link>
  </f:facet>
  <tc:panel id="ajaxPopupContent">
    <tc:messages/>
    <tc:in label="Input" value="#{popupController.popupAjax}" required="true"/>
    <tc:out label="Output" value="#{popupController.popupAjax}"/>
  </tc:panel>

  <f:facet name="footer">
    <tc:button label="Submit">
      <f:ajax execute="ajaxPopup" render="ajaxPopupContent :page:messages"/>
    </tc:button>
    <tc:button label="Submit & Close">
      <f:ajax execute="ajaxPopup" render="ajaxPopup :page:messages"/>
      <tc:operation name="hide" for="ajaxPopup"/>
    </tc:button>
    <tc:button label="Cancel" immediate="true">
      <f:ajax execute="ajaxPopup" render="ajaxPopup :page:messages"/>
      <tc:operation name="hide" for="ajaxPopup"/>
    </tc:button>
  </f:facet>
</tc:popup>

Client side popup

To create a client side popup, use omit="true" for buttons and set collapsedMode="hidden" for the popup. The popup will be alread rendered on the page and is shown/hidden via CSS.

Be aware that elements only hidden by CSS are still validated! For example, a required input field in a hidden client side popup will be checked after submit. You have also to consider that the shown/hidden state is not given to the server.

<tc:button label="Open client side popup" omit="true">
  <tc:operation name="show" for="clientPopup"/>
</tc:button>

<tc:popup id="clientPopup" collapsedMode="hidden">
  <f:facet name="label">Popup (client side)</f:facet>
  <f:facet name="bar">
    <tc:link image="bi-x-lg" omit="true">
      <tc:operation name="hide" for="clientPopup"/>
    </tc:link>
  </f:facet>
  <tc:panel id="clientPopupContent">
    <tc:messages/>
    <tc:in label="Input" value="#{popupController.popupClient}" required="true"/>
    <tc:out label="Output" value="#{popupController.popupClient}"/>
  </tc:panel>

  <f:facet name="footer">
    <tc:button label="Submit">
      <f:ajax execute="clientPopupContent" render="clientPopupContent"/>
    </tc:button>
    <tc:button label="Close" omit="true">
      <tc:operation name="hide" for="clientPopup"/>
    </tc:button>
  </f:facet>
</tc:popup>

Markup

The width of the popups can be changed by markups.

<tc:popup ... markup="extraLarge"> or "large" or "small"

Modal

By default the popup can be closed by clicking on the backdrop. To prevent this, set modal="true". The default value can be configured in the tobago-config.xml.

Menu

Popup

AJAX popup

Client side popup

Markup

Modal