hosted app using Pepperi's Client Api
1. Architecture
You can use Pepperi client API within your Hosted App page.
How ?
your Hosted App Page is running as an iframe placed in a Pepperi custom Form.
1. Technical Overview
1.1 Pepperi client API
Pepperi client API can by triggered from custom forms.
Attempting to call it from Your hosted App once you redirected to your server's page - will fail.
documenation:
Client API: https://apidocs.pepperi.com/
onClose: https://apidocs.pepperi.com/custom-form-unique-functions
1.2 Hosted App API
Hosted App API can be triggered from your Hosted Page.
Main methods:
call_client_api
call_close()
Idea:
these methods provides a way for triggering Client API methods.
Behind the scenes it uses messaging to communicate between the iframe and its parent.
(so that the page resides on your server is communicating with its parent resides on our servers which triggers the client API)
2. hosted App API
2.1 on_hosted_api_ready
Your hosted App page must implement this method.
only after this method is fired by the framework,
you can safely use Hosted API methods.
2.2 call_client_api
You can think of this method as a gateway
to call any Client API method from your hosted Page.
Usage:
function call_XXX()
{
call_client_api({
method_name: 'XXX', //eg: 'pepperi.app.getContext', 'pepperi.api.accounts.get'
request_object:
{
responseCallback: 'on_XXX_callback'
}
});
}
function on_XXX_callback(response)
{
console.log('XXX response=' + JSON.stringify(response));
if (response.success === true)
{
//TODO: use response.object
}
else
{
//TODO: use response.error.message
//TODO: use response.error.code
}
}
2.3 call_close
Usage:
call_close();
3. Prerequisite
3.1 Define custom form on Pepperi
and try running it.
Hello from custom form
3.2 Call getContext API from custom form
and try running it.
success result should return something like:
{"success": true, "CPIDateTime":"XXXXX","appVersion":"","appType":"web","OSType":"","OSVersion":"","company":{"id":0000,"name":"XXXX"},"user":{"id":000,"uuid":"XXXXX","externalId":""},"account":{"id":0,"name":"XXXX","uuid":"XXXXX"},"transaction":{"id":0,"externalId":"","uuid":"xxxxx"}}
Hello from custom form
4. Sample for calling Client API from your hosted App
4.1 create your hosted page
The link below contains a sample page.
please review its html and use it as a starting point.
eg: https://integration.pepperi.com/ui_tasks/kendo/App/HostedApp/v2/HostedApp_SamplePage-v2.html
Notes:
- This page must include HostedPage-v2.js.
- This page must implement on_hosted_api_ready.
4.2 create pepperi custom form
Please review the html below
and use it as a starting point you can copy the html below.
This page must include the js above.
This page must hold iframe that points to your hosted App page.
4.3 change the src of the iframe with your Hosted Page url.
4.4 Run the custom form from Pepperi.
By the end you should see your hosted app page.
4.5 Play around with the page
=> hit get context button
=> hit get acconut button
=> hit close form button
4.6 Optional:
Play around with the page again,
and read the console logs.
4.7 from that point,
you can continue changing your hosted App page.
Link: https://integration.pepperi.com/ui_tasks/kendo/App/HostedApp/v2/ReadMe-v2.txt