RickCogley/1. Readme.md

## 1. Readme.md

      
    Raw
  

              1. Readme.md
            
          
    Use HTMX to Access DBFlex / Teamdesk REST API JSON data

You can access the DBFlex / Teamdesk REST API using HTMX, specifically its "client side templates" extension. Use the API Playground from setup to get the URL to target with hx-get.
DBFlex wraps its json in an array, so if you're using a Mustache template, you need to wrap the field you're accessing like this:
{{#.}} {{ Holiday Name }} {{/.}}

Given json something like dbflex-view.json from DBFlex / Teamdesk, you can access it as shown in index.html below.
Test it yourself in this jsbin: https://jsbin.com/qonutovico/edit?html,output

  
## 2. dbflex-view.json
[{"@row.id":426,"Holiday Name":"National Foundation Day"}]

## 3. index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://unpkg.com/htmx.org@1.4.1"></script>
  <script src="https://unpkg.com/htmx.org@1.4.1/dist/ext/client-side-templates.js"></script>
  <script src="https://unpkg.com/mustache@latest"></script>
</head>
<body>
  <div hx-ext="client-side-templates">
    <button hx-get="https://pro.dbflex.net/secure/api/v2/12345/01F-DBFLEX-TOKEN-DE178/Work%20Holiday/API%20Holiday%20Text/select.json"
            hx-swap="innerHTML"
            hx-target="#replaceme"
            mustache-template="holi">
      Click Me
    </button>

    <p id="replaceme">Start</p>

    <template id="holi">
      <p>{{#.}} {{ Holiday Text }} {{/.}}</p>
    </template>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://unpkg.com/htmx.org@1.4.1"></script>
	<script src="https://unpkg.com/htmx.org@1.4.1/dist/ext/client-side-templates.js"></script>
	<script src="https://unpkg.com/mustache@latest"></script>
	</head>
	<body>
	<div hx-ext="client-side-templates">
	<button hx-get="https://pro.dbflex.net/secure/api/v2/12345/01F-DBFLEX-TOKEN-DE178/Work%20Holiday/API%20Holiday%20Text/select.json"
	hx-swap="innerHTML"
	hx-target="#replaceme"
	mustache-template="holi">
	Click Me
	</button>

	<p id="replaceme">Start</p>

	<template id="holi">
	<p>{{#.}} {{ Holiday Text }} {{/.}}</p>
	</template>
	</div>
	</body>
	</html>