-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
147 lines (135 loc) · 6.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link rel="stylesheet" type="text/css" href="https://airtable.com/css/compiled/all.css" />
<style>
/* CSS Overrides */
.sharedForm .sharedFormField .title {
margin-bottom: 0px;
}
.formHeader{
padding: 1rem !important;
}
.sharedForm .sharedFormField {
margin-top: 12px;
}
.sharedForm .formSubmit{
margin-top: 2rem;
margin-bottom: 2rem;
}
p.warning::before {
content: "❌";
padding-right: 7px;
}
/* Form styling */
#airtableWdcForm .parsley-errors-list li::before {
content: "❌";
padding-right: 7px;
}
#airtableWdcForm .parsley-errors-list li{
color: red;
padding-left: 10px;
line-height: 1.5em;
}
#airtableWdcForm .errorsContainer{
display: inline-block
}
#airtableBaseId.select {
width: 100%;
height: 34px;
}
#airtableBaseIdPointer{
display: none;
}
#airtableSwitchBaseInput{
font-style: italic;
float: right;
color: grey;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/parsley.min.js" integrity="sha256-pEdn/pJ2tyT37axbEIPkyUUfuG1yXR0+YV+h+jphem4=" crossorigin="anonymous"></script>
<script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/airtable.browser.js"
integrity="sha256-p/K0s4ZRy6mYh4fGnABFVF82IDaM4Nk5nEsLs0pGfGc=" crossorigin="anonymous"></script>
<script src="index.js"></script>
<title>Airtable - Tableau Web Data Connector </title>
</head>
<body class="disable-cell-selection noPointerEventsForBlockIframes noPointerEventsForPaneDivider"
data-interaction-mode="pointer">
<div id="hyperbaseContainer">
<div class="relative width-full height-full">
<div class="sharedForm overflow-auto webkit-touch-scroll">
<main class="form reactForm">
<form id="airtableWdcForm" data-parsley-validate="">
<div class="formContent">
<header>
<div class="formCoverImageContainer col-12 background-cover background-center"></div>
<div class="formHeader mx-auto max-width-2 lg-rounded-big md-rounded-big sm-rounded-big white">
<div class="formLogoImageContainer"></div>
<h1 class="formName">Airtable - Tableau Web Data Connector</h1>
<p class="formDescription break-word">Use this Tableau Web Data Connector from Tableau 2019.4+ to import the schema and records from your Airtable base.
<div class="quieter small">
<p>The software made available through this page and its scripts are not supported by Formagrid Inc (Airtable) or part of the Airtable Service. It is made available on an "as is" basis and provided without express or implied warranties of any kind. </p>
</div>
</p>
</div>
</header>
<div class="formFieldAndSubmitContainer px3 py1">
<div class="formFieldContainer mx-auto max-width-2">
<div class="sharedFormField">
<label for="airtableApiToken" class="title">Personal Access Token or API Key</label>
<span id="errorsFor_airtableApiToken" class="errorsContainer"></span>
<div class="description">Create a <a href="https://airtable.com/developers/web/guides/personal-access-tokens" target="_blank">personal access token</a> (PAT) with 'data.records:read' and 'schema.bases:read' scopes from <a href="https://airtable.com/create/tokens" target="_blank">airtable.com/create/tokens</a>.</div>
<div class="cellContainer">
<div class="cell formCell" data-columntype="text">
<div class="flex-auto flex baymax">
<input type="password"
data-parsley-errors-container="#errorsFor_airtableApiToken"
data-parsley-trigger="focusin focusout"
class="col-12 rounded border-thick border-darken2 border-darken3-hover detailCursor-border-blue border-blue-focus"
value="" id="airtableApiToken" required="" style="padding: 6px" />
</div>
</div>
</div>
</div>
<div class="sharedFormField">
<label for="airtableBaseId" class="title">Base</label>
<span id="errorsFor_airtableBaseId" class="errorsContainer"></span>
<div class="description">The list of bases below contain bases your PAT or API key have access to. If a base is missing, revisit your PAT's 'Permissions' allow list and refresh this page.</div>
<div class="cellContainer">
<div class="cell formCell" data-columntype="text">
<div class="flex-auto flex baymax" id="airtableBaseIdContainer">
<select class="select col-12 rounded border-thick border-darken2 border-darken3-hover detailCursor-border-blue border-blue-focus" id="airtableBaseId" name="airtableBaseId" required="" data-parsley-errors-container="#errorsFor_airtableBaseId" data-parsley-pattern-message="Your base ID should start with the letters 'app'">
<option value="">(This list will populate after an API key is provided)</option>
</select>
</div>
</div>
</div>
<div class=""><a href="#" id="airtableSwitchBaseInput">Specify a base ID manually</a><span id="airtableBaseIdPointer">Your base ID can be found at the top your base's API docs (from <a href="https://airtable.com/api" target="blank">airtable.com/api</a>)</div>
</div>
</div>
<div class="formSubmit mx-auto max-width-2 baymax">
<div id="formValidationMessage" class="formValidationMessage focus-visible" tabindex="-1">
<p></p>
</div>
<input type="submit"
id="submitButton"
class="submitButton blue rounded-big px2 py1 text-white strong huge border-none submit styled-input focus-visible pointer link-quiet"
value="Go" />
<div class="mt2 quieter small">
<!-- Footer text could go here -->
</div>
</div>
</div>
</div>
</form>
</main>
</div>
</div>
</div>
</body>
</html>