-
Notifications
You must be signed in to change notification settings - Fork 3
Getting Started
If you are about to use the chayns api you need to initialize it first.
Here you can find information to the relating methods. Keep in mind that the chayns.register method is optional to use.
For using chayns you need to include the chayns script to your projects. In addition, the chayns styles must also be loaded so that all functions work properly.
After the document and chayns are loaded, 'chayns.ready' returns a promise that you can work with.
You can predefine some parameters using chayns.register, explained below.
On success the function in the first '.then'-block will be invoked. If an error occurs the function in the '.catch'-block will be executed instead. The second '.then' function will always be invoked.
Supported Platforms
- Android
- iOS
- ChaynsWeb
chayns.ready.then(() => {
console.log('Chayns is ready, environment loaded', chayns.env);
}).catch(() => {
console.warn('No chayns environment found');
}).then(() => {
console.log('Will always be executed');
});
Registers the Tapp with the given config. This function and all parameters are optional. It has to be executed before the chayns.ready function.
Supported Platforms
- Android
- iOS
- ChaynsWeb
Parameter
- strictMode (optional) : boolean - If true, chayns functions with wrong parameters wont be executed. Default: true.
- appName (optional) : string - Sets the Tapp name to distinguish logs or local storage entries.
- cssPrefix (optional) : string - Sets a css class prefix. Default prefix is 'chayns-'.
- callbackPrefix (optional) : string - Sets a callback name prefix to prevent overwriting.
- initialHeight (optional) : int - Specifies the initial height for the tapp.
- autoResize (optional) : boolean - Disables auto resizing for the tapp. Default: false.
- apiDialogs (optional) : boolean - Enables new dialogs. Default: false.
If you want to start working with chayns, there a just a few steps to go so your tapp project is ready.
Requirements
- chayns environment (chayns web, chayns app, native app (e.g. Tobit.Software app), or ChaynsWebLight)
In case you want to use one of the examples or templates we offer, you can skip the first two steps and start with step 3.
You can find our examples here.
- Create a new file called index and change it's file type to html
- Open the file and insert the following code
<!DOCTYPE html>
<html>
<head>
<!--Add Meta-Tags for scaling etc.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1, maximum-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="utf-8">
<title>Tapp</title>
<!--Load the chayns styles-->
<link rel="stylesheet" href="https://api.chayns.net/css/">
</head>
<body> <!-- the following tapp-classes provide the tapp-typical styles. More information in the chayns-css repository -->
<div class="tapp">
<div class="tapp__intro">
<h1>Example Tapp</h1>
<p>
This tapp shows you the basics of working with the chayns® API.
Log in for using the features of this tapps.
</p>
</div>
</div>
<!--Load the js chayns API-->
<script src="https://api.chayns-static.space/js/v4.0/chayns.min.js"></script>
</body>
</html>
In this snippet, two external files are loaded via the Tobit CDN
- The first one is the chayns stylesheet
- The second one is the chayns api script
- Create a new script tag below the implementation of chayns
- Use the following promise to initialize chayns
chayns.ready.then(() => {
//inside this block you can use any chayns function
});
Now the index.html file is created and you can make it a tapp.
- Make your index.html file accessable via a webserver
- Go to your chayns site -> Configuration -> Tapps -> Add Tapp -> External Content
- Choose a name for the tapp (e.g. 'chayns introduction') and insert the url pointing to your index.html file in the url field
- Now take a look at the side menu and select your tapp.
You should see a blank tapp. Thats because now content was added yet. For adding content you may want to try out the chayns style getting started.
Note: If you are using a template and skipped the first two steps, locate the chayns.ready-block inside the index.js file.
Now you are ready to use chayns functions inside the chayns.ready-block
- Extend the block used above by any chayns function.
In this case we will be using a dialog function and access the user object - Insert the following code into the chayns.ready promise
if (chayns.env.user.isAuthenticated) { //checks if an user is logged in
const userName = chayns.env.user.name; //storing the user userName to a variable
chayns.dialog.alert('Username', userName); //showing an alert dialog that views the name of the current user
}
Now reload the tapp and there you go: a chayns dialog displaying the name of the current logged in user shows up.
You also can type in any name to the input field and any user of your site that has this name will be listed.
<!-- To get started.. -->
<!-- Load the chayns API styles and JavaScript from our server -->
<!-- css styles -->
<script src="https://api.chayns-static.space/css/v4/compatibility/compatibility.min.js" version="4.2"></script>
<!-- js api -->
<script src="https://api.chayns-static.space/js/v4.0/chayns.min.js"></script>