Monday, April 29, 2013

Adding Cloud App Studio Forms into Google Sites



Some good news. We have just cracked the code on how to embed Cloud App Studio-based Forms.
A bit technical, but I think you could manage it :-)

Some pre-req's:
How to create the widget
1. App settings: make sure that users ("Anyone") have at least "Contributor" access
2. Copy this sample code into a "Page", which you can call "widget.xml" (don't really think it matters what you call it):

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Cloud App Studio - Embedded Form Sample" />
<Content type="html"><![CDATA[
{{injected form-code here}}
]]></Content>
</Module>

3. Replace "{{injected form-code here}}" with the Form you want to embed into your Google Sites page
4. Add the domain (//cloudappstudio.appspot.com) to the "Inject Forms" code, which could look something like this:

<script type='text/javascript' src='//cloudappstudio.appspot.com/app/@context("app","name")/inject-form/fu680xcs?style=basic'></script>

4. Uncheck the Page-More-setting "Show with Application Layout"
5. Save the page (alt-s) and Open it (alt-o).
6. Copy the url to the page, which just displays some weird characters: ]]> (which is correct..)

Now you are ready to add your widget into your Google Sites page:
1 In edit-mode: "Insert" -> " ...More Gadgets" (bottom of first column)
2. Click "Add gadget by URL" and paste your url (to your page)
3. Preview the added gadget, modify display settings (optional) and click "ok", when done.
4. Save your Page and you're done. 

Take a look at this Tutorial and see if it helps: