HOWTO: Embed the Share Previewer on your own website

[mikeh]

I posted this in reply to a question in the Alfresco Explorer forum, but thought it might be useful over here. It details one way you can embed the Share WebPreviewer on your own website with code along the lines of:

<embed type="application/x-shockwave-flash"
   src="http://<server>:<port>/share/components/preview/WebPreviewer.swf"
   width="670px"
   height="670px"
   id="WebPreviewer"
   name="WebPreviewer"
   quality="high"
   allowscriptaccess="sameDomain"
   allowfullscreen="true"
   wmode="transparent"
   flashvars="fileName=aaar.png&amp;paging=false&amp;url=http%3A%2F%2Flocalhost%3A8080%2Falfresco%2Fservice%2Fapi%2Fnode%2Fworkspace%2FSpacesStore%2F15ddb4a8-63a5-4bf3-95a8-4d121d2eaed2%2Fcontent%3Fc%3Dforce%26noCacheToken%3D1257980553515%26guest%3Dtrue&amp;show_fullscreen_button=true&amp;i18n_actualSize=Actual%20Size&amp;i18n_fitPage=Fit%20Page&amp;i18n_fitWidth=Fit%20Width&amp;i18n_fitHeight=Fit%20Height&amp;i18n_fullscreen=Fullscreen&amp;i18n_fullwindow=Maximize&amp;i18n_fullwindow_escape=Press%20Esc%20to%20exit%20full%20window%20mode&amp;i18n_page=Page&amp;i18n_pageOf=of" />‍‍‍‍‍‍‍‍‍‍‍

Note the flashvars variable is a string passed through "encodeURIComponent" consisting of the following variables:

fileName=aaar.png
paging=false
url=http://localhost:8080/alfresco/service/api/node/workspace/SpacesStore/15ddb4a8-63a5-4bf3-95a8-4d121d...
show_fullscreen_button=true
i18n_actualSize=Actual Size
i18n_fitPage=Fit Page
i18n_fitWidth=Fit Width
i18n_fitHeight=Fit Height
i18n_fullscreen=Fullscreen
i18n_fullwindow=Maximize
i18n_fullwindow_escape=Press Esc to exit full window mode
i18n_page=Page
i18n_pageOf=of"‍‍‍‍‍‍‍‍‍‍‍‍‍

Note the noCacheToken on the end of the "url" variable to ensure your users are always viewing the latest content. It's up to you whether you generate this value or not.
Obviously you'll have to update the "localhost:8080" part of the url to match your Alfresco server.
You'll want to set the paging variable to "true" for .swfs generated from Word documents, PDFs, etc. It's "false" for images, such as this example.

The i18n messages make the tag somewhat unwieldy, so I've uploaded a (completely unsupported and not fully tested) version of the WebPreviewer.swf that has the English strings built-in by default here: http://mikehatfield-alfresco.s3.amazonaws.com/WebPreviewer.swf.zip

<embed type="application/x-shockwave-flash"
   src="http://<server>:<port>/share/components/preview/WebPreviewer.swf"
   width="670px"
   height="670px"
   id="WebPreviewer"
   name="WebPreviewer"
   quality="high"
   allowscriptaccess="sameDomain"
   allowfullscreen="true"
   wmode="transparent"
   flashvars="fileName=aaar.png&amp;paging=false&amp;url=http%3A%2F%2Flocalhost%3A8080%2Falfresco%2Fservice%2Fapi%2Fnode%2Fworkspace%2FSpacesStore%2F15ddb4a8-63a5-4bf3-95a8-4d121d2eaed2%2Fcontent%3Fc%3Dforce%26noCacheToken%3D1257980553515%26guest%3Dtrue&amp;show_fullscreen_button=true" />‍‍‍‍‍‍‍‍‍‍‍

Questions:

• Is this of interest at all to users in general?


• Would it be useful for this HTML to be generated the Document Details page along with the existing three URLs?


• Would you be happy for Share to automatically grant guest access to the document / would you only want a Site Manager to be able to do this / would you prefer a specific "Public Share" folder in the Document Library?

Comments and suggestions welcome.

Thanks,
Mike

[ivan_plestina]

Questions:

• Is this of interest at all to users in general?


• Would it be useful for this HTML to be generated the Document Details page along with the existing three URLs?


• Would you be happy for Share to automatically grant guest access to the document / would you only want a Site Manager to be able to do this / would you prefer a specific "Public Share" folder in the Document Library?

Comments and suggestions welcome.

Thanks,
Mike

Yes.
Yes.
Probably bet to have it configurable with default value false. Public share would be a nice addition alongside the previous feature for publishing documents to external users.

[nej]

Hi !

I have tried to embed this preview, but sadly without success. Could you please help me out here? I'm new to Alfresco, so probably some of these questions will be either dumb or really easy…

If I look into Alfresco interface my download url of some file looks like this:
http://localhost:8080/alfresco/d/a/workspace/SpacesStore/17512bb6-829c-42af-9ea0-2ea78dab9346/Dokume...

but if I look into Share interface the download url is more like this:
http://localhost:8080/share/proxy/alfresco-feed/api/node/content/workspace/SpacesStore/17512bb6-829c...

I guess I have to use the first one for embeding, right?

So, the flashvars should be something like this:

fileName=Dokumentacija.odt
paging=false
url=http://localhost:8080/alfresco/d/a/workspace/SpacesStore/17512bb6-829c-42af-9ea0-2ea78dab9346/conten...
show_fullscreen_button=true
i18n_actualSize=Actual Size
i18n_fitPage=Fit Page
i18n_fitWidth=Fit Width
i18n_fitHeight=Fit Height
i18n_fullscreen=Fullscreen
i18n_fullwindow=Maximize
i18n_fullwindow_escape=Press Esc to exit full window mode
i18n_page=Page
i18n_pageOf=of"
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Not really sure if I did this correctly … I took the fileName out of the url, and the appended "/content?c=force&noCacheToken=1257980553515&guest=true" to what it was left of it. Was this OK or totaly wrong?


Now, probably I also need to tell Alfresco to allow "guest" document viewing … how do I do that? Is it the "alfresco.authentication.allowGuestLogin" configuration which I found on this (http://wiki.alfresco.com/wiki/Alfresco_Authentication_Subsystems) page?

Thx for your help!

Regards,
Jernej

[mikeh]

I'm not sure why you didn't use the URL pattern I posted in the original article for the content, but if the download servlet works too, then you should be ok.

That guest parameter is only for the NTLM authentication subsystem, which I suspect you're not using. What you'll want to do is to create a new space using the Alfresco Explorer called something like "Public Share". You then make sure the guest user has read-only access to it using the "Manage Space Users" action.

Thanks,
Mike

[fakir22]

Hi everybody,

I've exactly the same problem as Jernej.

I've been trying to get throught this from several hours now but without success, the swf is showing up but no content inside.

I'd tried dozen of url template and other weired solutions.  Here's my code :

<embed 
type="application/x-shockwave-flash"
src="http://88.190.27.154:8080/share/components/preview/WebPreviewer.swf" 
width="670px" 
height="670px" 
flashvars="fileName=fpagecomplete1.pdf&amp;paging=true&amp;url=http%3A%2F%2F88.190.27.154%3A8080%2Falfresco%2Fservice%2Fapi%2Fnode%2Fworkspace%2FSpacesStore%2F4a8e3c62-d731-4344-8b99-2790b769df27%2Fcontent%3Fc%3Dforce%26noCacheToken%3D1257980553515%26guest%3Dtrue&amp;show_fullscreen_button=true&amp;i18n_actualSize=Actual%20Size&amp;i18n_fitPage=Fit%20Page&amp;i18n_fitWidth=Fit%20Width&amp;i18n_fitHeight=Fit%20Height&amp;i18n_fullscreen=Fullscreen&amp;i18n_fullwindow=Maximize&amp;i18n_fullwindow_escape=Press%20Esc%20to%20exit%20full%20window%20mode&amp;i18n_page=Page&amp;i18n_pageOf=of" 
id="WebPreviewer" 
name="WebPreviewer" 
quality="high" 
allowscriptaccess="always" 
allowfullscreen="true" 
wmode="transparent" />‍‍‍‍‍‍‍‍‍‍‍‍

Do you see anything wrong with that snippet ?
Does the <object> tag should appear aroud <embed> tag ?
Does it should'nt work with cross-domain site, because my Drupal instance is on another server that my Alfresco instance.


Thanks for your help.

Best regard,

Adrian

[raaftjon]

hello

I've the same problem with the embedded share document previewer.

The WebPreviewer is loaded but no content is displayed.

Kind regards,
Jonas Schmid

[imran]

Facing the same problem

[swentel]

Having the same problem. I can construct the URL, because surfing to it directly gives me the document in my browser nicely, so that's all fine.

I guess this is more of security thing that the WebPreviewer.swf can not connect from an external domain ?

[refur]

Is there no solution for this?
I have the same problem, I can't see the content inside the web previewer.
I really need to know how to do this.

[imran]

Hello,
have you been able to resolve that problem? Do I need to pass a file from alfresco repository or any file is fine?