Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Client-side embedding #1577

Open
avernet opened this issue Mar 4, 2014 · 17 comments
Open

Client-side embedding #1577

avernet opened this issue Mar 4, 2014 · 17 comments

Comments

@avernet
Copy link
Collaborator

@avernet avernet commented Mar 4, 2014

This would provide a way for users to embed a form created with Form Builder into an existing site.

  • Framework-neutral JavaScript API to perform the embedding
    • Implementation of ORBEON.fr.API.embedForm({ container: HTMLElement, app: String, form: String, action: "new", documentId: string, queryString: string })
    • Solve error happening when loading the 2nd form, after an initial load
    • Reduce memory leaks (right now we leak a few MB each time a form is loaded)
    • Avoid flickering when form is loaded on Chrome
  • Server-side
    • Determine API (probably better than just making Ajax requests to /orbeon/fr/app/form/new?orbeon-embeddable=true), client could pass the base URI to the server (which might not be able to determine it reliably)
    • Do rewriting to have absolute URLs in the HTML and CSS
  • Angular component using the above API, making the integration easier for Angular users
    • Make component reusable
    • Determine where the source for the component should be checked in

For later:

  • Handling xf:submission replace="all" (see #3141), by just replacing the part of the page in which the form is, would be needed to support the "review" button, which an MVP wouldn't need to support.

Notes:

  • Angular support is motivated by customers using that framework, and the popularity of this framework (2017: only second to React, 2018: second to React and arguable Vue.js).
@avernet avernet self-assigned this Mar 4, 2014
@avernet

This comment has been minimized.

Copy link
Collaborator Author

@avernet avernet commented Mar 4, 2014

+1 from Jeff.

@avernet avernet added 1 Point and removed 1 Point labels Apr 15, 2014
@avernet

This comment has been minimized.

Copy link
Collaborator Author

@avernet avernet commented Nov 15, 2014

@ebruchez ebruchez mentioned this issue Oct 28, 2015
1 of 2 tasks complete
@ebruchez

This comment has been minimized.

Copy link
Collaborator

@ebruchez ebruchez commented Feb 8, 2016

@ebruchez

This comment has been minimized.

Copy link
Collaborator

@ebruchez ebruchez commented Feb 26, 2016

@avernet

This comment has been minimized.

Copy link
Collaborator Author

@avernet avernet commented Jul 28, 2016

@avernet

This comment has been minimized.

Copy link
Collaborator Author

@avernet avernet commented Oct 18, 2016

@ebruchez

This comment has been minimized.

Copy link
Collaborator

@ebruchez ebruchez commented Dec 20, 2016

@ebruchez

This comment has been minimized.

Copy link
Collaborator

@ebruchez ebruchez commented Jun 13, 2017

See also #2843 regarding Liferay 7's behavior to add/remove <script> elements.

@ebruchez

This comment has been minimized.

Copy link
Collaborator

@ebruchez ebruchez commented Jun 13, 2017

See also Liferay's Senna.js.

@ebruchez ebruchez changed the title Support Form Runner forms inclusion with jQuery.load() Client-side embedding Jun 13, 2017
@ebruchez

This comment has been minimized.

Copy link
Collaborator

@ebruchez ebruchez commented Jun 13, 2017

Renamed. We had mentioned jQuery.load(), but that is not the only solution. Check also what Senna.js uses.

@ebruchez

This comment has been minimized.

Copy link
Collaborator

@ebruchez ebruchez commented Jun 13, 2017

Also relevant to Liferay 7's SPA support.

@avernet

This comment has been minimized.

Copy link
Collaborator Author

@avernet avernet commented Apr 28, 2018

I've added a note about supporting Angular, specifically.

+1 from user

@avernet

This comment has been minimized.

Copy link
Collaborator Author

@avernet avernet commented Aug 22, 2019

@avernet

This comment has been minimized.

Copy link
Collaborator Author

@avernet avernet commented Sep 17, 2019

+1 from user, using PHP on the server

@ebruchez

This comment has been minimized.

Copy link
Collaborator

@ebruchez ebruchez commented Oct 4, 2019

+1 from customer using React

@ebruchez

This comment has been minimized.

Copy link
Collaborator

@ebruchez ebruchez commented Oct 4, 2019

Things to consider:

  • provide a clean JavaScript embedding API
  • cleanup, including markup, global objects, event listeners
  • proxying of resources and Ajax requests
  • loading a form
  • events for the embedding application
  • navigation between Form Runner pages
@avernet avernet added this to In progress in Orbeon Forms 2019.2 Nov 1, 2019
@avernet

This comment has been minimized.

Copy link
Collaborator Author

@avernet avernet commented Nov 20, 2019

To enable host A (app) to load the form from B (Orbeon Forms), we must:

  • On A:
    • Set the Content-Security-Policy header to define what the current page can load/run (e.g. with B on localhost:8081, to style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval' http://localhost:8081; connect-src 'self' http://localhost:8081).
    • Pass withCredentials: true when doing the XHR request, so cookies are stored.
  • On B:
    • Set Access-Control-Allow-Origin allowing A to make an XHR to B (e.g. to http://localhost:8080 if this is where A is).
    • Set Access-Control-Allow-Credentials: true to allow the caller to save headers and send them in subsequent requests.

For now, we've decided to require the app and Orbeon Forms to be seen by the browser as being on the same server, requiring proxying if they are not, this for the following reasons:

  • The above setup seems to be of same order of complexity as setting up proxying, if needed.
  • Browser, in particular Safari, might prevent this from working, as they try to prevent tracking, especially since in our case users will never access Orbeon Forms directly.
  • Have the app and Orbeon Forms on different hosts creates session validity problems.
ebruchez added a commit that referenced this issue Dec 5, 2019
avernet added a commit that referenced this issue Dec 7, 2019
- Add `ORBEON.fr.API.destroyForm()`
- Support `destroy()` in XBL components
- Date component to unregister its listener on language change
avernet added a commit that referenced this issue Dec 7, 2019
avernet added a commit that referenced this issue Dec 12, 2019
avernet added a commit that referenced this issue Dec 12, 2019
avernet added a commit that referenced this issue Dec 12, 2019
avernet added a commit that referenced this issue Dec 12, 2019
avernet added a commit that referenced this issue Dec 13, 2019
avernet added a commit that referenced this issue Dec 13, 2019
ebruchez added a commit that referenced this issue Dec 13, 2019
ebruchez added a commit that referenced this issue Dec 13, 2019
avernet added a commit that referenced this issue Dec 13, 2019
@ebruchez ebruchez removed this from In progress in Orbeon Forms 2019.2 Dec 19, 2019
@ebruchez ebruchez added this to To review in Orbeon Forms 2020.1 via automation Dec 19, 2019
avernet added a commit that referenced this issue Dec 20, 2019
avernet added a commit that referenced this issue Dec 20, 2019
@ebruchez ebruchez moved this from To review to To do in Orbeon Forms 2020.1 Jan 9, 2020
avernet added a commit that referenced this issue Jan 10, 2020
@ebruchez ebruchez moved this from To do to In progress in Orbeon Forms 2020.1 Jan 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Orbeon Forms 2020.1
  
In progress
2 participants
You can’t perform that action at this time.