coapps-framework v2.3.7-0
Installation
npm install coapps-framework
Usage
This script imports the startApp function from the module
startApp = require("coapps-framework")
To include the Google Api client add this in your index.html, this also calls the gapiLoaded function when the Google Api client has been loaded
<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=gapiLoaded"></script>
The gapiLoaded function initializes the all Api properties and passes them into the startApp function
window.gapiLoaded = ->
rtprops =
clientId: "/*CLIENT-ID*/"
appId: "/*APP-ID*/"
appName: "WRITE APP NAME HERE"
modelComponent: YOUR TOP LEVEL COMPONENT (A react class)
initModel: YOUR MODEL INITIALIZER FUNCTION
registerTypes: YOUR MODEL REGISTERTYPE FUNCTION
modelWrapper: YOUR MODEL modelWrapper FUNCTION
logo: THE PATH TO YOUR LOGO PICTURE
mimeType:THIS SPECIFIES THE FILE TYPE (e.g "application/vnd.#{organisation}.#{appname}.google-apps.drive-sdk")
serialize: YOUR MODEL SERIALIZE FUNCTION
googleAnalytics: INITIALIZED ga FUNCTION
keenWritekey: "/*KEEN API WRITE KEY*/"
keenProjectid: "/*KEEN PROJECT ID KEY*/"
startApp(rtprops)
Properties
For help with clientId & appId click here
appName: (string) The name of your app
modelComponent: (A react class) This is the main react component that renders the view of your app
initModel:(model)-> () This is the initializer function to your realtime model Need more infomation? click here
registerTypes: YOUR MODEL REGISTERTYPE FUNCTION Need more infomation? click here
modelWrapper: The name of the custom object that contains the realtime model
logo:
serialize: google "serialize" :)
Make sure the origin for the client configured properly Make sure the google Drive SDK is enabled Tutorial can be found here The open url must More info on URL and matching patterns
open url should look like:
https://<HOSTNAME>/<PATH>/<TO>/<APP>/#/file/{ids}
In your Model Component the following propertise can be accessed
- file : Imformation on the file such as Id, title ...etc
- rtDoc : The realtime document object
- emitter : To communicate with the framework (i.e to return to the homepage and share documents etc)
- authResult :
- ga :
- keenClient :
To call the google share client dialog on a file currently open
@props.emitter.emit 'share'
To return to the home screen
@props.emitter.emit 'home'
Analytics
We include google and keen-js Analytics Api's, to use the google Analytics Api add this script in the Head tag of your index.html page
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXX-Y', 'auto');
</script>
<!-- End Google Analytics -->
Styling
In your main sass file, add the following
@import 'node_modules/coapps-framework/assets/stylesheets/index'
Below is a descriptive list of the sass variables, please include them in your stylesheet
$main-color : Color of major components in framrwork: navbar, odd rows of file table, buttons. Blue by default
$page-background-color : Color of background. Light blue by default
$main-text-color : Color of major text in framework: header titles, text in even rows of file table. Dark blue by default
$page-header-border-color : Color of the thin line under the headers of each page
$nav-item-default-color : Color of the four navbar items when they are not hovered on
$nav-item-active-color : Color of the four navbar items when they are hovered on or clicked
$nav-item-active-background-color : Color of the four navbar items background boxes when they are hovered on of clicked
$table-odd-text-color : Color of text in odd rows
$brand-color : Color of the left hand side brand in the navbar
$button-active-color : Color of buttons when they are hovered on
$loader-color : The color of the loading element
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago