Embedding the Orbeon form gives unexpected results

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

Embedding the Orbeon form gives unexpected results

kushp
I'm embedding an Orbeon form in my application. The form when accessed directly using the URL (not the embedded form) is working just fine. But the embedded form seems to give unexpected results. I've attached the screenshots of both, the embedded and un-embedded form. I embedded the Orbeon API using the steps mentioned in https://doc.orbeon.com/form-runner/link-embed/java-api.html#form-builder-embedding

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].

un-embedded form.png (342K) Download Attachment
embedded form.png (495K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Embedding the Orbeon form gives unexpected results

Alessandro  Vernet
Administrator
Hi Kush,

In the embedded case, it looks like some CSS that should hide some content
in the page isn't applied.

- Could you check if the browser is unable to load some CSS? You can see
that, for instance, in the Chrome Dev Tools, in the Network tab.
- Do you have any JavaScript error showing in the JavaScript console?

You'll let us know what you find.

Alex

-----
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
--
Sent from: http://discuss.orbeon.com/

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
Reply | Threaded
Open this post in threaded view
|

Re: Embedding the Orbeon form gives unexpected results

kushp
Hi Alex,

I checked the console in both Chrome and Firefox browsers. Your guess was correct. The CSS file fails to load. Let me give you the context of this problem. I'm embedding the form inside a JSP page. When I try to do so by simply calling the API.embedFormJava( ) in the JSP page, the form works fine. But the need here is to call the method inside a custom tag. As the scriptlets are not allowed in custom tags (and static methods can't be invoked in EL), I've wrapped the org.orbeon.oxf.fr.embedding.servlet.API inside an instance method. Calling the API.embedFormJava( ) from the instance method in the JSP page works fine too. But when invoking it from the custom tag, the CSS fails to load. Following are the code snippets.

Embedding the form with the EL code at root level. (works just fine)

<%@ page import="java.util.HashMap" pageEncoding="utf-8" contentType="text/html; charset=UTF-8" import="org.orbeon.oxf.fr.embedding.servlet.API"
import="org.kuali.kra.s2s.orbeon.service.OrbeonServiceImpl" import="javax.servlet.http.HttpServletRequest" import="java.io.Writer"%>

<jsp:useBean id="orbeonForm" class="org.kuali.kra.s2s.orbeon.service.OrbeonServiceImpl"/>
${orbeonForm.produceForm(pageContext.request, pageContext.out)}

Embedding the form with the EL code inside a custom tab. (CSS fails to load)

<%@ include file="/WEB-INF/jsp/kraTldHeader.jsp"%>
<%@ page import="java.util.HashMap" pageEncoding="utf-8" contentType="text/html; charset=UTF-8" import="org.orbeon.oxf.fr.embedding.servlet.API"
import="org.kuali.kra.s2s.orbeon.service.OrbeonServiceImpl" import="javax.servlet.http.HttpServletRequest" import="java.io.Writer"%>

<div id="workarea">
<div align="right"><kul:help documentTypeName="ProposalDevelopmentDocument" pageName="Forms" /></div>
<p>

<kul:tab tabTitle="EPA4700_2_1_1"
defaultOpen="false">
${orbeonForm.produceForm(pageContext.request, pageContext.out)}
</kul:tab>
..closing tags

I've attached the screenshots of errors encountered in the Consoles of both browsers.



On Friday, March 2, 2018 at 6:00:01 AM UTC+5:30, Alessandro Vernet wrote:
Hi Kush,

In the embedded case, it looks like some CSS that should hide some content
in the page isn't applied.

- Could you check if the browser is unable to load some CSS? You can see
that, for instance, in the Chrome Dev Tools, in the Network tab.
- Do you have any JavaScript error showing in the JavaScript console?

You'll let us know what you find.

Alex

-----
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
--
Sent from: <a href="http://discuss.orbeon.com/" target="_blank" rel="nofollow" onmousedown="this.href=&#39;http://www.google.com/url?q\x3dhttp%3A%2F%2Fdiscuss.orbeon.com%2F\x26sa\x3dD\x26sntz\x3d1\x26usg\x3dAFQjCNF5V5zfD-87RVoalaG4cqO_RzdDcA&#39;;return true;" onclick="this.href=&#39;http://www.google.com/url?q\x3dhttp%3A%2F%2Fdiscuss.orbeon.com%2F\x26sa\x3dD\x26sntz\x3d1\x26usg\x3dAFQjCNF5V5zfD-87RVoalaG4cqO_RzdDcA&#39;;return true;">http://discuss.orbeon.com/

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Reply | Threaded
Open this post in threaded view
|

Re: Embedding the Orbeon form gives unexpected results

kushp
In reply to this post by Alessandro Vernet
The produceForm( ) method is as coded as below:

public void produceForm(HttpServletRequest httpServletRequest, Writer out){
API.embedFormJava(httpServletRequest, out, "S2S_Forms", "EPA4700_4_2_1_V2_1", "new", null, "propsalID=376", null);
}

On Friday, March 2, 2018 at 6:00:01 AM UTC+5:30, Alessandro Vernet wrote:
Hi Kush,

In the embedded case, it looks like some CSS that should hide some content
in the page isn't applied.

- Could you check if the browser is unable to load some CSS? You can see
that, for instance, in the Chrome Dev Tools, in the Network tab.
- Do you have any JavaScript error showing in the JavaScript console?

You'll let us know what you find.

Alex

-----
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
--
Sent from: <a href="http://discuss.orbeon.com/" target="_blank" rel="nofollow" onmousedown="this.href=&#39;http://www.google.com/url?q\x3dhttp%3A%2F%2Fdiscuss.orbeon.com%2F\x26sa\x3dD\x26sntz\x3d1\x26usg\x3dAFQjCNF5V5zfD-87RVoalaG4cqO_RzdDcA&#39;;return true;" onclick="this.href=&#39;http://www.google.com/url?q\x3dhttp%3A%2F%2Fdiscuss.orbeon.com%2F\x26sa\x3dD\x26sntz\x3d1\x26usg\x3dAFQjCNF5V5zfD-87RVoalaG4cqO_RzdDcA&#39;;return true;">http://discuss.orbeon.com/

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Reply | Threaded
Open this post in threaded view
|

Re: Embedding the Orbeon form gives unexpected results

kushp
In reply to this post by kushp
Hi Alex,

Perhaps I think it's more than just a CSS issue. Below screenshot might help. There's an error in the Orbeon Javascript file that says the key for the form is not found. This issue is faced only when I invoke the form in the custom tag file. When invoked directly from the JSP file, no such error occurs.



On Thursday, March 1, 2018 at 4:58:54 PM UTC+5:30, [hidden email] wrote:
I'm embedding an Orbeon form in my application. The form when accessed directly using the URL (not the embedded form) is working just fine. But the embedded form seems to give unexpected results. I've attached the screenshots of both, the embedded and un-embedded form. I embedded the Orbeon API using the steps mentioned in <a href="https://doc.orbeon.com/form-runner/link-embed/java-api.html#form-builder-embedding" target="_blank" rel="nofollow" onmousedown="this.href=&#39;https://www.google.com/url?q\x3dhttps%3A%2F%2Fdoc.orbeon.com%2Fform-runner%2Flink-embed%2Fjava-api.html%23form-builder-embedding\x26sa\x3dD\x26sntz\x3d1\x26usg\x3dAFQjCNGOdUC0HbFMxSBLHiQbf0ECj_HOkw&#39;;return true;" onclick="this.href=&#39;https://www.google.com/url?q\x3dhttps%3A%2F%2Fdoc.orbeon.com%2Fform-runner%2Flink-embed%2Fjava-api.html%23form-builder-embedding\x26sa\x3dD\x26sntz\x3d1\x26usg\x3dAFQjCNGOdUC0HbFMxSBLHiQbf0ECj_HOkw&#39;;return true;">https://doc.orbeon.com/form-runner/link-embed/java-api.html#form-builder-embedding

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Reply | Threaded
Open this post in threaded view
|

Re: Embedding the Orbeon form gives unexpected results

Alessandro  Vernet
Administrator
Hi Kush,

I've never tried using this API from a custom tag, so you'll have to debug
this ;). I'd recommend you look at what differences you have when you call
this API from a custom tag, vs. from the JSP itself. From the JavaScript
error in your screenshot, the JavaScript code is looking for a `kualiForm`.
Is this an id of yours? Is it supposed to be there in the DOM? Why isn't it
there? Maybe it is, but with some prefix or suffix? You'll let me know what
you find.

Alex

-----
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
--
Sent from: http://discuss.orbeon.com/

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
Reply | Threaded
Open this post in threaded view
|

Re: Embedding the Orbeon form gives unexpected results

kushp
Hi Alex,

Intuitively, I put the code that produces the form in the parent custom tag. This tag is used to make a tab. On one screen it was used five times to produce five tabs. The output of the corresponding JSP page was interesting enough. Out of the five forms embedded in five tabs, the first form was broken. But the rest four were working fine. Form data can be persisted in the database too. This is weird. I thought of a temporary workaround. A dummy Orbeon form can be published. This form will be requested as the first form but kept in a hidden division tag. Visually, it is flawless. However, it's a bad patch. 

Yes, the key 'kualiForm' is the ID of the <form> tag of the HTML page. I've no clue why the Orbeon Javascript cannot find the key. (Sometimes it reported a NoSuchElementException) The Orbeon JS file(orbeon-4a9223ddeece107210aa858a70059ccfe3a4bafe.js) throws an exception for the missing form key. I un-minified the JS file and tried to track the flow. But I guess it was not worth it. 

Let me share my findings here. I put two different forms, one dummy form, and an actual form. One was placed at the root level(here it works, as always) and one in the custom tag. I wanted to find the order in which the CSS files for these forms are loaded. I observed that the file names are same but the path is different.
http://127.0.0.1:8090/ekualiti-kc/orbeon/o0/xforms-server/152b50814ba83105bcc874972527b24ba8f3851b/orbeon-6223253ad3b290874a3b95740396c687134f4e3a.css
http://127.0.0.1:8090/ekualiti-kc/orbeon/o1/xforms-server/152b50814ba83105bcc874972527b24ba8f3851b/orbeon-6223253ad3b290874a3b95740396c687134f4e3a.css

Notice the 'o1' and 'o0'. Of course, you might be aware of it. But I suspect that for the form in the custom tag, it's CSS file is loaded quite early than the usual scripts file required in my HTML page. FreeMarker templates (.ftl) are used to create a common reusable HTML page. This page created the <form> for the HTML page and it's the one that sets the form id attribute. I'm not sure but let's assume this flow:

The <form> tag is loaded my ftl file with the form id 'kualiForm'.
Meanwhile, the Orbeon JS file for the embedded form in the custom tag is requested taking with it the form id value. I assumed this as the exception logs the value of the form key.
Still, the form page is not completely loaded as the Network panel listed other script files requested after the Orbeon JS file request.

This might possibly result in a broken first Orbeon form.
There's a plausible explanation why the rest of the Orbeon forms are working. The CSS file request for the rest of the forms in Network panel appeared at the last. Most of the scripts pertaining to the HTML page were loaded, either from disk cache or downloaded. 

I tried to defer load the form so that the CSS file for the first form is requested after all other scripts are loaded. But I couldn't do so. I've attached the screenshot of the Network panel. They are in order of the file name.

I hope this might be helpful.
 

On Tuesday, March 6, 2018 at 5:14:33 AM UTC+5:30, Alessandro Vernet wrote:
Hi Kush,

I've never tried using this API from a custom tag, so you'll have to debug
this ;). I'd recommend you look at what differences you have when you call
this API from a custom tag, vs. from the JSP itself. From the JavaScript
error in your screenshot, the JavaScript code is looking for a `kualiForm`.
Is this an id of yours? Is it supposed to be there in the DOM? Why isn't it
there? Maybe it is, but with some prefix or suffix? You'll let me know what
you find.

Alex

-----
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
--
Sent from: <a href="http://discuss.orbeon.com/" target="_blank" rel="nofollow" onmousedown="this.href=&#39;http://www.google.com/url?q\x3dhttp%3A%2F%2Fdiscuss.orbeon.com%2F\x26sa\x3dD\x26sntz\x3d1\x26usg\x3dAFQjCNF5V5zfD-87RVoalaG4cqO_RzdDcA&#39;;return true;" onclick="this.href=&#39;http://www.google.com/url?q\x3dhttp%3A%2F%2Fdiscuss.orbeon.com%2F\x26sa\x3dD\x26sntz\x3d1\x26usg\x3dAFQjCNF5V5zfD-87RVoalaG4cqO_RzdDcA&#39;;return true;">http://discuss.orbeon.com/

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Reply | Threaded
Open this post in threaded view
|

Re: Embedding the Orbeon form gives unexpected results

Alessandro  Vernet
Administrator
Hi Kush,

The thing is that right now loading multiple forms in the same page, whether
through the embedding API or through Liferay portlets, isn't supported. We
only support 1 form per page. A lot is already done in the code to handle
the multiple-forms-on-one-page situation, but this isn't something we're
testing for and/or supporting right now, so I'm not surprised you're finding
issues with it. We have a request for enhancement for this (linked below),
and I've added a +1 from you.

https://github.com/orbeon/orbeon-forms/issues/1854 

So, you could either use a workaround/hack. And if it works for you, then
good. Otherwise you'll need to find a way to just have 1 form, which means
that "changing tab", will need to reload the page from the server. I know
this isn't ideal ;), but this is how things stand right now, until the RFE
mentioned earlier is implemented. You'll let me know if this makes sense.

Alex

-----
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
--
Sent from: http://discuss.orbeon.com/

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet