Skip to content

Instantly share code, notes, and snippets.

@nf3

nf3/jssdk.html

Created April 30, 2023 00:35
Show Gist options
  • Save nf3/cc38908d8ef87a62516d7a6f93fff1a0 to your computer and use it in GitHub Desktop.
Save nf3/cc38908d8ef87a62516d7a6f93fff1a0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jssdk.html
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Auth Example</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}
input {
font-size: 14px;
}
body {
line-height: 1.4;
color: #333333;
font-family: Helvetica, Arial, sans-serif;
}
.d-none, .d-none-until-render {
display: none !important;
}
</style>
</head>
<body>
<main class="main">
<div class="container">
<div class="header">
<h1>HTML Auth Example</h1>
</div>
<div class="authed d-none">
<div>
<a class="">
<img width="42" class="rounded-circle auth-src-user" referrerpolicy="no-referrer" data-auth-user-field="picture" data-auth-default="/1.jpg" src="/1.jpg" alt="">
</a>
<div>
<a class="auth-href-issuer-settings" href="#">User Settings</a>
<button type="button" class="auth-button-settings">User Settings</button>
<button type="button" class="auth-button-logout">Logout</button>
</div>
</div>
<div class="user-info">
<div class="auth-label-user" data-auth-user-field="name" data-auth-default="Name not available">
</div>
<div class="auth-label-user" data-auth-user-field="email" data-auth-default="">
</div>
</div>
</div>
<div class="unauthed d-none">
<div class="">
<button type="button" class="auth-button-login">
Login
</button>
</div>
<div class="">
<button type="button" class="auth-button-signup">
Create Account
</button>
</div>
</div>
<p>-------------------------------------------------------</p>
<!--JS SDK examples -->
<!-- getData -->
<h3>getData example:</h3>
<br>getData calls are cached, so if you make multiple calls per page load, it will only call out to AirTable once.
<br>Notice the 'cache' parameter, it can be set to either: ['page', 'none'] 'page' will cache the results, 'none' will not
<br>
<br>
<p>window.vv_airtable.getData(baseid, table, cache, cb)
<div class="authed d-none">
<button type="button" id="btngetData">getData</button>
<p>Output:</p>
<div id="txtgetData"></div>
</div>
<p>-------------------------------------------------------</p>
<!-- getTable -->
<h3>getTable example:</h3>
<br>getTable is NOT cached, each call to it will call back to the server every time.
<br>
<br>
<p>window.vv_airtable.getTable(baseid, table, cb)
<div class="authed d-none">
<button type="button" id="btngetTable">getTable</button>
<p>Output:</p>
<div id="txtgetTable"></div>
</div>
<p>-------------------------------------------------------</p>
<!-- Create Record -->
<h3>createRecord example:</h3>
<br>createRecord will add a new record to a table with the logged in user's id automatically populated into the vv_id column
<br>
<br>record format should be in the following JSON form:
<pre>
const record = {
fields: {
"Name": "Jimmy",
"Start date": "August 21, 2022"
}
};
</pre>
<p>createRecord(baseid, table, record, cb)
<div class="authed d-none">
<button type="button" id="btncreateRecord">createRecord</button>
<p>Output:</p>
<div id="txtcreateRecord"></div>
</div>
<p>-------------------------------------------------------</p>
<!-- Create Records - Multiple -->
<h3>createRecords example:</h3>
<br>createRecords will add multiple new record to a table with the logged in user's id automatically populated into the vv_id column
<br>
<br>records format should be in the following JSON form:
<pre>
const records = {
"records": [
{
fields: {
"Name": "Mike",
"Start date": "August 22, 2022"
}
},
{
fields: {
"Name": "Roger",
"Start date": "August 23, 2022"
}
},
{
fields: {
"Name": "Billy",
"Start date": "August 24, 2022"
}
}
]
};
</pre>
<p>createRecords(baseid, table, records, cb)
<div class="authed d-none">
<button type="button" id="btncreateRecords">createRecords</button>
<p>Output:</p>
<div id="txtcreateRecords"></div>
</div>
<p>-------------------------------------------------------</p>
<!-- upsert LoneRecord -->
<h3>upsertLoneRecord example:</h3>
<br>upsertLoneRecord will update or insert a single record to a table with the logged in user's id automatically mapped or populated into the vv_id column
<br>NOTE: an upsertLoneRecord request will ONLY allow updates to the single record that match the vv_id of the logged in user, upserts requests with 'Record ID' that contain vv_ids that do not match the vv_id of the logged in user will return an error.
<br>
<br>NOTE: a max of 1 single record can be in the table for this upsertLoneRecord to work without passing in a 'Record ID', in order to update more records, you must use upsertRecordsByID. If the user has more than one record, this update will return an error.
<br>
<br>record format should be in the following JSON form:
<pre>
const record = {
"records": [
{
fields: {
"Name": "Mike New Name",
}
}
]
};
</pre>
<p>upsertLoneRecord(baseid, table, record, cb)
<div class="authed d-none">
<button type="button" id="btnupsertLoneRecord">upsertLoneRecord</button>
<p>Output:</p>
<div id="txtupsertLoneRecord"></div>
</div>
<p>-------------------------------------------------------</p>
<!-- upsert RecordsByID -->
<h3>upsertRecordsByID example:</h3>
<br>upsertRecordsByID will update or insert up to 10 records to a table with the logged in user's id automatically mapped or populated into the vv_id column
<br>NOTE: an upsert request will ONLY allow updates to records that match the vv_id of the logged in user, upserts requests with 'Record ID' that contain vv_ids that do not match the vv_id of the logged in user will return an error.
<br>
<br>NOTE: a max of 10 records can be in a single request.
<br>
<br>NOTE: The Airtable 'Record ID' is required to update multiple records
<br>
<br>record format should be in the following JSON form:
<pre>
const records = {
"records": [
{
"id": "rec5wNCh6qlRAmcms",
fields: {
"Name": "Mike5",
"Start date": "August 2, 2022",
}
},
{
"id": "recfPTlhxE072EdPk",
fields: {
"Name": "Roger5",
"Start date": "August 2, 2022"
}
},
{
"id": "recx03DCGQVTvhSdC",
fields: {
"Name": "Billy2",
}
}
]
};
</pre>
<p>upsertRecordsByID(baseid, table, records, cb)
<div class="authed d-none">
<button type="button" id="btnupsertRecordsByID">upsertRecordsByID</button>
<p>Output:</p>
<div id="txtupsertRecordsByID"></div>
</div>
</div>
</main>
<script src="https://cf.vvkey.io/bundle_v1.3.js"></script>
<script>
window.vv_process = { env: {
"VV_ISSUER_URL": 'PUT IN YOUR AUTH TENANT URL FROM VAULTVISION - https://auth.vvkey.io',
"VV_CLIENT_ID": 'PUT IN YOUR CLIENT ID FROM VAULTVISION - WWerbFOlpIvV',
"VV_BASE_URL": "PUT IN YOUR NODE-AUTH-AIRTABLE NODEJS APP URL - http://localhost:8090",
"VV_PRIVATE_LITE": true,
}};
</script>
<!--Setup some variables -->
<script>
let table="wishlist";
let baseid="app8Bj4fSoM2Hv3s9";
let cachetype="page";
let btngetData = document.getElementById("btngetData");
let txtgetData = document.getElementById("txtgetData");
let btngetTable = document.getElementById("btngetTable");
let txtgetTable = document.getElementById("txtgetTable");
let btncreateRecord = document.getElementById("btncreateRecord");
let txtcreateRecord = document.getElementById("txtcreateRecord");
let btncreateRecords = document.getElementById("btncreateRecords");
let txtcreateRecords = document.getElementById("txtcreateRecords");
let btnupsertLoneRecord = document.getElementById("btnupsertLoneRecord");
let txtupsertLoneRecord = document.getElementById("txtupsertLoneRecord");
let btnupsertRecordsByID = document.getElementById("btnupsertRecordsByID");
let txtupsertRecordsByID = document.getElementById("txtupsertRecordsByID");
let createrecordInput = {
fields: {
"Name": "Jimmy",
"Start date": "August 21, 2022"
}
};
let createrecordsInput = {
"records": [
{
fields: {
"Name": "Mike",
"Start date": "August 22, 2022"
}
},
{
fields: {
"Name": "Roger",
"Start date": "August 23, 2022"
}
},
{
fields: {
"Name": "Billy",
"Start date": "August 24, 2022"
}
}
]
};
let upsertLoneRecordInput = {
"records": [
{
fields: {
"Name": "Mike New Name"
}
}
]
};
let upsertRecordsByIDInput = {
"records": [
{
"id": "rec5wNCh6qlRAmcms",
fields: {
"Name": "Mike5",
"Start date": "August 2, 2022",
}
},
{
"id": "recfPTlhxE072EdPk",
fields: {
"Name": "Roger5",
"Start date": "August 2, 2022"
}
},
{
"id": "recx03DCGQVTvhSdC",
fields: {
"Name": "Billy2",
}
}
]
};
</script>
<!--getData Example -->
<script>
btngetData.addEventListener("click", (event) => {
window.vv_airtable.getData(baseid, table, cachetype, data=>txtgetData.innerText=JSON.stringify(data, null, 2));
})
</script>
<!--getTable Example -->
<script>
btngetTable.addEventListener("click", (event) => {
window.vv_airtable.getTable(baseid, table, data=>txtgetTable.innerText=JSON.stringify(data, null, 2));
})
</script>
<!--createRecord Example -->
<script>
btncreateRecord.addEventListener("click", (event) => {
window.vv_airtable.createRecord(baseid, table, createrecordInput, data=>txtcreateRecord.innerText=JSON.stringify(data, null, 2));
})
</script>
<!--createRecords Example -->
<script>
btncreateRecords.addEventListener("click", (event) => {
window.vv_airtable.createRecords(baseid, table, createrecordsInput, data=>txtcreateRecords.innerText=JSON.stringify(data, null, 2));
})
</script>
<!--upsertLoneRecord Example -->
<script>
btnupsertLoneRecord.addEventListener("click", (event) => {
window.vv_airtable.upsertLoneRecord(baseid, table, upsertLoneRecordInput, data=>txtupsertLoneRecord.innerText=JSON.stringify(data, null, 2));
})
</script>
<!--upsertRecordsByID Example -->
<script>
btnupsertRecordsByID.addEventListener("click", (event) => {
window.vv_airtable.upsertRecordsByID(baseid, table, upsertRecordsByIDInput, data=>txtupsertRecordsByID.innerText=JSON.stringify(data, null, 2));
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment