If you are developing a third party service and want users to have the option to embed an Awesome Table app, then using our app picker will provide a user-friendly tool to select their apps.
What does the Awesome Table picker do?
With this picker, users can access Awesome Table apps list from your own website.
If connected to their Awesome Table account, your users will be able to access their app's list and search apps within it. It provides them with a link to their apps (the preview and edit pages) and a link to the app creation.
How to use the picker?
The picker is iframe-able with the following URL:
https://awesome-table.com/picker |
We use postMessages to exchange information between the picker and your website. You can use an Event Listener to trigger a function when your website receive the message event.
window.addEventListener('message', myFunction); |
The picker can send the following actions:
"iframeResize": It gives you the height your picker should have. It's useful to automatically resize the picker in your website. This information can be found on the event.data object.
event.data { |
"getId": Asks the initial app ID saved by the page calling the picker.
event.data { |
You can then respond by sending the app ID, using the event source:
event.source.postMessage({ |
"setId": It gives you the id of the app that is currently selected by the user. This event will be sent each time the user select a different app.
event.data { |
Code example
This is a code example on how you can use Awesome Table picker in interaction with your website:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Awesome Table view's picker Example </title>
</head>
<body>
<!-- Optimal size for the picker is 764x366px -->
<iframe id="atPicker" frameborder="none" src="https://awesome-table.com/picker" width="100%" height="366px"></iframe>
<script>
// This will act as the stored viewId
var exampleInitialId = '-KerhlsnYs6g65vJBi-N';
/**
* Listener for message coming from the picker.
* 3 type of message are possible (a key in event.data):
*
* - iframeResize : Contains the new desired Height of the picker
* - getId : Ask the initial view Id
* - setId : Contains the view Id picked by the user
*
* @param {MessageEvent} event
*/
function listenConfMessage(event) {
// filter out un-wanted messages
if (event.origin !== 'https://awesome-table.com' || typeof event.data !== 'object') return;
// iframeResize: atPicker ask for resize in height
if ('iframeResize' in event.data){
document.getElementById('atPicker').style.height = ''+ event.data['iframeResize'] +'px';
}
// getId: atPicker ask for initial viewId
if ('getId' in event.data){
// send back the saved view Id
event.source.postMessage({
'getId': true,
'id': exampleInitialId
}, '*');
}
// setId: atPicker send the view picked by the user
else if ('setId' in event.data){
console.log('Picked view Id:', event.data['setId']);
/**
* Save here the view Id,
*
* Note: this will be called each time the user select a view
* You can implement a [Save] and a [Cancel] button, and set the last picked Id on Save action.
*/
}
}
window.addEventListener('message', listenConfMessage);
</script>
</body>
</html>