Domo DDX Brick Custom Navigation

README.md

Demo

---

1. Uses Example Countries Dashboard with three sub pages
2. Uses DomoStats connector to pull all pages in instance
3. Creates a view of DomoStats connector to select the pages to be included in Countries Dashboard Navigation
4. Create a DDX Brick to Implement the navigation tabs

Resources

---

Bootstrap Introduction

Bootstrap: Navs and tabs

Horizontal Scrolling Navbar Inspiration

index.css

.wrapper {
	position:relative;
	margin:0 auto;
	overflow:scroll;
	padding:1rem;
	height: 10rem;
}

.list {
	position:absolute;
	left:0px;
	top:0px;
	min-width:3000px;
	margin-left:12px;
	margin-top:0px;
}

.list li{
	display:table-cell;
	position:relative;
	text-align:center;
	cursor:grab;
	cursor:-webkit-grab;
	color:#efefef;
	vertical-align:middle;
}

index.html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="container">
  <div class="wrapper">
    <ul class="nav nav-tabs list" id="navigation-tabs"></ul>
  </div>
</div>

index.js

// DDX Bricks Wiki - See https://developer.domo.com/docs/ddx-bricks
// for tips on getting started, linking to Domo data and debugging your app
 
//Available globals
var domo = window.domo;
var datasets = window.datasets;

const navList = document.getElementById('navigation-tabs');

//Step 1. Select your dataset(s) from the button in the bottom left corner



//Step 2. Query your dataset(s): https://developer.domo.com/docs/dev-studio-references/data-api
var fields = ['Page ID', 'Title'];
var query = `/data/v1/${datasets[0]}?fields=${fields.join()}`;
domo.get(query).then(handleResult);



//Step 3. Do something with the data from the query result
function handleResult(data){
  for (let i = 0; i < data.length; i++) {
  	createListItem(data[i]);
  }
  
  setCurrentPageToActive();
  console.log(navList);
}

//takes a row of data (pageId and title) and create a list item
function createListItem(row) {
  const pageId = row["Page ID"];
  const title = row["Title"];
 	
  const listItem = navList.appendChild(document.createElement('li'));
  listItem.classList.add('nav-item');
  
  const listLink = listItem.appendChild(document.createElement('a'));
  listLink.textContent = title;
  listLink.classList.add('nav-link');
  listLink.setAttribute('href', "#");
  listLink.setAttribute('data-id', pageId);
  
  listLink.addEventListener('click', event => {
  const navPageId = event.target.getAttribute("data-id");
  if(typeof navPageId == 'number'){
    	domo.navigate("/page/" + navPageId);
  }
}

function setCurrentPageToActive() {
  const currentPageId = domo.env.pageId;
  const currentPageListLink = document.querySelector(`[data-id='${currentPageId}']`);
  currentPageListLink.classList.add('active');
}