Is there a way to have special Brands based off the group or email people have?

DWill978 · 2024-08-07T14:35:37+00:00

There was an error rendering this rich post.

Hi all,

I work with a larger company that currently have 8-10 smaller companies using DOMO for reporting. My colleagues and I typically create a copy of Dashboards and now some App Studios for when we bring get a new company onto DOMO.

Basically, is there a way to make an entire App/ Dashboard PDP, not just based on the data? I want to change the colors and images based on their group or email associated with that individual.

Find more posts tagged with

PDP

Brand Kit

AppStudio

Accepted answers

ColemenWilson

Not really. You could get creative with images though. For example, I have a page in Domo where an image in the top left of the page changes depending on what product is selected. You could do the same and have a dynamic image that changes based on which user logs in.

ColemenWilson

I used a DDX brick + a webform. This is the DDX brick I am using: https://www.domo.com/appstore/app/ddx-html-table-app/overview

For your webform, you'll also want a column with values that can correspond to a PDP policy.

My Webform:

Screenshot 2024-08-07 at 11.31.24 AM.png

DDX Brick code:

Javascript:

var domo = window.domo;
var datasets = window.datasets;
var myDataTable = document.getElementById('myDataTable');

// Data Column Names
var dataColumnName = 'Image URL';


// Form the data query
var select = [dataColumnName];
var query = `/data/v1/${datasets[0]}?select=${select.join()}

&filter='Image URL'!=null`;


// Get the data and build table
domo.get(query, {format: 'array-of-arrays'}).then(buildTableGrid);

function buildTableGrid(data){
   // var max = 0, min = 0, total = 0;
  var totalTableHeaders = [data.columns[0]];
  var totalTable = [];
  data.rows.forEach(function(row, index){
    totalTable.push([row[0]])
  });

  buildTable(myDataTable, 
             totalTableHeaders, 
             totalTable);
}

function buildTable(tableEl, headers, data){
  // Build header row
  var thead = tableEl.appendChild(document.createElement('thead'));
  var headerRow = thead.appendChild(document.createElement('tr'));
  headers.forEach(function(h){
    var th = headerRow.appendChild(document.createElement('th'));
    th.innerText = h;
  });
  
  
  // Add table data rows
  var tbody = tableEl.appendChild(document.createElement('tbody'));
  var fragment = document.createDocumentFragment();
  data.forEach(function(row){
    fragment.append(getRow(row));
  });
  tbody.appendChild(fragment);
}

function getRow(rowData){
  var rowEl = document.createElement('tr');
  rowData.forEach(function(d){
    debugger
    var td = rowEl.appendChild(document.createElement('td'));
    td.innerHTML = d;

  });
  return rowEl;
}

HTML:

<link href="//fonts.googleapis.com/css?family=Roboto+Mono:300" rel="stylesheet" type="text/css">

<table id="myDataTable"></table>

CSS:

body{
  font-size: 14px;
}

table {
  border-collapse: collapse;
}
.column_heading {
  height:0px;
}
th {
  background-color: transparent;
  border: transparent;
  text-align: left;
  padding: 0px;
  color: #333;
  border-top: 0px;
}
.form-matrix-row-headers {

    display : none !important;

}

th:nth-child(1){

    display: none;

}
table tr th {
   border: transparent;
   border-top: none;
   border-bottom: none;
}
th:first-child {
  visibility:hidden;
  padding: none;
  border-collapse: collapse;
}
td {
  border: transparent;
  padding: none;
  width: 1500px;
  font-family: "Arial", monospace;
  font-weight: 300;
  color: #333;
  text-align: left;
}

tr:nth-child(odd) td {
  background-color: transparent;
}

#myStatsTable{
  float: left;
  margin-right: 20px;
}

Final result:

https://www.loom.com/share/34d96f00b9db4862a6c184ffd5248151?sid=ff1f7560-3559-4ca1-b47d-2c3eca8865f9

All comments

ColemenWilson

DWill978

https://community-forums.domo.com/main/discussion/comment/97685#Comment_97685

Interesting, how exactly would that work?

ColemenWilson

I used a DDX brick + a webform. This is the DDX brick I am using: https://www.domo.com/appstore/app/ddx-html-table-app/overview

For your webform, you'll also want a column with values that can correspond to a PDP policy.

My Webform:

DDX Brick code:

Javascript:

var domo = window.domo;
var datasets = window.datasets;
var myDataTable = document.getElementById('myDataTable');

// Data Column Names
var dataColumnName = 'Image URL';


// Form the data query
var select = [dataColumnName];
var query = `/data/v1/${datasets[0]}?select=${select.join()}

&filter='Image URL'!=null`;


// Get the data and build table
domo.get(query, {format: 'array-of-arrays'}).then(buildTableGrid);

function buildTableGrid(data){
   // var max = 0, min = 0, total = 0;
  var totalTableHeaders = [data.columns[0]];
  var totalTable = [];
  data.rows.forEach(function(row, index){
    totalTable.push([row[0]])
  });

  buildTable(myDataTable, 
             totalTableHeaders, 
             totalTable);
}

function buildTable(tableEl, headers, data){
  // Build header row
  var thead = tableEl.appendChild(document.createElement('thead'));
  var headerRow = thead.appendChild(document.createElement('tr'));
  headers.forEach(function(h){
    var th = headerRow.appendChild(document.createElement('th'));
    th.innerText = h;
  });
  
  
  // Add table data rows
  var tbody = tableEl.appendChild(document.createElement('tbody'));
  var fragment = document.createDocumentFragment();
  data.forEach(function(row){
    fragment.append(getRow(row));
  });
  tbody.appendChild(fragment);
}

function getRow(rowData){
  var rowEl = document.createElement('tr');
  rowData.forEach(function(d){
    debugger
    var td = rowEl.appendChild(document.createElement('td'));
    td.innerHTML = d;

  });
  return rowEl;
}

HTML:

<link href="//fonts.googleapis.com/css?family=Roboto+Mono:300" rel="stylesheet" type="text/css">

<table id="myDataTable"></table>

CSS:

body{
  font-size: 14px;
}

table {
  border-collapse: collapse;
}
.column_heading {
  height:0px;
}
th {
  background-color: transparent;
  border: transparent;
  text-align: left;
  padding: 0px;
  color: #333;
  border-top: 0px;
}
.form-matrix-row-headers {

    display : none !important;

}

th:nth-child(1){

    display: none;

}
table tr th {
   border: transparent;
   border-top: none;
   border-bottom: none;
}
th:first-child {
  visibility:hidden;
  padding: none;
  border-collapse: collapse;
}
td {
  border: transparent;
  padding: none;
  width: 1500px;
  font-family: "Arial", monospace;
  font-weight: 300;
  color: #333;
  text-align: left;
}

tr:nth-child(odd) td {
  background-color: transparent;
}

#myStatsTable{
  float: left;
  margin-right: 20px;
}

Final result:

https://www.loom.com/share/34d96f00b9db4862a6c184ffd5248151?sid=ff1f7560-3559-4ca1-b47d-2c3eca8865f9