Coding tips and trix
Embed-code
Forms and Views can be embedded into your web site you use today. It is very easy.
Note: You need to set the accurate access level to let your users see you components. Forms should have specific, or "Anyone" set to "contributor" - Views requires "Editor" to be rendered.
The code for a Form, for example, is found under the "Share and Embed"-link in the "More..."-menu. At the bottom of this window, you copy the following code - note this is just an example of a public form (you can use this just to test this function):
<script type='text/javascript' src='http://cloudappstudio.appspot.com/app/tdf4KZhC/inject-form/ikZnJZth?style=jquery'></script>
Notice the last information in the src-property (the query-string):
?style=jquery
This informs to render the embedded component using a, so called, jqueryui-code. This means that the embedded component will render its look and feel based on the selected "Fonts & Colors"-setting in the Layout-component.
Illustration I - "Fonts and Colors"-section in the Layout builder.
?style=basic
...and to override the App-settings add the parameter "&skin=[name-of-skin]:
?style=jquery&skin=sunny
This will render all fields without "jqueryui" - a more simple way to render your form.
The last option to render the embedded Form with a specific "Font & Colors
Illustration I - The "Embed and Share"-window
Illustration III - ?style=jquery
Illustration II - ?style=basic
Illustration IIII - ?style=jquery&skin=sunny
Embedding a view
The view can be embedded in a very similar way. You find the "embed"-code under the "More..."-menu in the view you want to embed.
Illustration V - Link to "Embed" is found under the "More..."-menu
<script type='text/javascript' src='http://cloudappstudio.appspot.com/app/[appID]/inject-view/[viewID]'></script>
The "appID" and "viewID" is unique for each view and this value is something automatically added by Cloud App Studio.
The view can either use the "Fonts & Colors"-setting applied to the web application, or you can specify a "jqueryui"-theme to the view by adding the following "query string":
?style=sunny
Example:
<script type='text/javascript' src='http://cloudappstudio.appspot.com/app/[appID]/inject-view/[viewID]?style=sunny'></script>
Adding HTML-code in your Layout-builder
You can add almost any HTML-code in your rich-text editor (which is the open source editor "TinyMCE", for those interested) - apart from <script>-tags.
One neat thing to do is to extend your "Font & Colors"-selection by adding areas that inherit values from those settings.
Illustration VI - The HTML-icon marked in the Rich text editor.
Click the HTML-icon in the rich text editor.
Add the following code-snippet:
<div class="ui-state-active ui-corner-all" style="padding: 2em; margin-top: 4em;">This is my Header</div>
Illustration VII - Adding the class for a div will created this appearance, when having the "Font & Color" set to "UI-darkness"...
Illustration VIII - ...and it looks like this when the "Font & Color" settings are set to "Dot Luv"
Another sample code, easy to use could be:
<div class="ui-state-hover ui-corner-all" style="padding: 1em; margin-top: 4em;">Copyright Some Company Inc.</div>
This will use the "ui-state-active" class from the "Fonts and Color" selection and it will make all corners rounded with the "ui-corner-all"-class.
Other classes that can be used can be found here - if this is new to you: trial and error. Remember: You won't break anything :-)
No comments:
Post a Comment