How to include a pop-up dialog box in subflow

I don’t think webflow parent -> subflow transitions were design for such a problem. Web flow assumes you are transitioning from page -> page. Your best bet is to make ajax/javascript call while the pop up window is initializing to a specific transition defined in your parent/main flow and place the logic you want to execute inside the transition. You can configure Spring Webflow to return fragments of html that will only be rendered by your javascript code.

Here is an example from one of my projects.

  <view-state id="edit" view="flows/s/#{flowScope.modelPathName}/v/edit" model="modelObj">              
        <!--  NOTE: Inheriting flow must implement its own specific binding
        <binder>
            <binding property="name" /> 
            <binding property="description" />
        </binder> 
         -->

        <transition on="saveModel" to="chkLocalmodelObjDiff"/>
        <transition on="cancelSave" to="cancelEdit" bind="false"/> 
        <transition on="objUnlink">
            <set name="flashScope.viewResponse" value="pbmService.removeObjRelationship(requestParameters.objId,requestParameters.objName,modelObj)"/>

            <render fragments="view_response_msg" />
        </transition>

so in the example above we are in our “parent/main” flow. the “objUnlink” transition can be triggered by either an html link that looks like this.

(sudo code url):

${flowExecutionUrl}?_eventId='objUnlink'&someOtherParam=2

Required PARAM to Trigger the transition is: “_eventId=objUnlink”

or via ajax call where the url is structured like this:

(sudo code url):

${flowExecutionUrl}?_eventId='objUnlink'&someOtherParam=2&ajaxSource=true

Required PARAMs to Trigger the transition via ajax are:
“_eventId=objUnlink” and “ajaxSource=true”

Because we have the:

<render fragments="view_response_msg" />

Triggering either url will only render the ‘view_response_msg’ fragment as defined by your view. In my case I am using thymeleaf as my view framework and ‘view_response_msg’ is defined as a fragment in thymeleaf.

So after sending the request and executing the transition my response body will only consist of the rendered html that was defined in my ‘view_response_msg’ (and not the entire page).

So for your use case you should:

1. Define a fragment in your view framework that will only render the contents of the pop up window. To stay consistent with our example will call it ‘view_response_msg’

2. Then call a specific transition on the parent/main flow via AJAX. Again to stay consistent will call it ‘objUnlink’

3. Then store this partially rendered html response in a javascript variable (remember we called this transition from ajax call) and then display it inside your pop up.

4. If you want to update the parent/main flow when some one closes the pop up use the same concept and create another ajax call -> transition -> fragment render. Remember we have not left the main flow.

Sorry for the long answer but it is not a trivial problem 🙂

Note: Spring Web Flow must be EXPLICITLY configured to handle ajax requests. See the documentation. Moreover, your specific view framework might (e.g thymeleaf) has it’s own specific configuration/implementation for Web Flow to handle ajax requests and for rendering fragments.