App Studio

App Studio

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

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.

Welcome!

It looks like you're new here. Members get access to exclusive content, events, rewards, and more. Sign in or register to get started.
Sign In

Best Answers

  • Answer ✓

    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.

    If I solved your problem, please select "yes" above

  • Answer ✓

    I used a DDX brick + a webform. This is the DDX brick I am using: Site faviconappstore

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

    My Webform:

    DDX Brick code:

    Javascript:

    1. var domo = window.domo;
    2. var datasets = window.datasets;
    3. var myDataTable = document.getElementById('myDataTable');
    4.  
    5. // Data Column Names
    6. var dataColumnName = 'Image URL';
    7.  
    8.  
    9. // Form the data query
    10. var select = [dataColumnName];
    11. var query = `/data/v1/${datasets[0]}?select=${select.join()}
    12.  
    13. &filter='Image URL'!=null`;
    14.  
    15.  
    16. // Get the data and build table
    17. domo.get(query, {format: 'array-of-arrays'}).then(buildTableGrid);
    18.  
    19. function buildTableGrid(data){
    20. // var max = 0, min = 0, total = 0;
    21. var totalTableHeaders = [data.columns[0]];
    22. var totalTable = [];
    23. data.rows.forEach(function(row, index){
    24. totalTable.push([row[0]])
    25. });
    26.  
    27. buildTable(myDataTable,
    28. totalTableHeaders,
    29. totalTable);
    30. }
    31.  
    32. function buildTable(tableEl, headers, data){
    33. // Build header row
    34. var thead = tableEl.appendChild(document.createElement('thead'));
    35. var headerRow = thead.appendChild(document.createElement('tr'));
    36. headers.forEach(function(h){
    37. var th = headerRow.appendChild(document.createElement('th'));
    38. th.innerText = h;
    39. });
    40. // Add table data rows
    41. var tbody = tableEl.appendChild(document.createElement('tbody'));
    42. var fragment = document.createDocumentFragment();
    43. data.forEach(function(row){
    44. fragment.append(getRow(row));
    45. });
    46. tbody.appendChild(fragment);
    47. }
    48.  
    49. function getRow(rowData){
    50. var rowEl = document.createElement('tr');
    51. rowData.forEach(function(d){
    52. debugger
    53. var td = rowEl.appendChild(document.createElement('td'));
    54. td.innerHTML = d;
    55.  
    56. });
    57. return rowEl;
    58. }

    HTML:

    1. <link href="//fonts.googleapis.com/css?family=Roboto+Mono:300" rel="stylesheet" type="text/css">
    2.  
    3. <table id="myDataTable"></table>

    CSS:

    1. body{
    2. font-size: 14px;
    3. }
    4.  
    5. table {
    6. border-collapse: collapse;
    7. }
    8. .column_heading {
    9. height:0px;
    10. }
    11. th {
    12. background-color: transparent;
    13. border: transparent;
    14. text-align: left;
    15. padding: 0px;
    16. color: #333;
    17. border-top: 0px;
    18. }
    19. .form-matrix-row-headers {
    20.  
    21. display : none !important;
    22.  
    23. }
    24.  
    25. th:nth-child(1){
    26.  
    27. display: none;
    28.  
    29. }
    30. table tr th {
    31. border: transparent;
    32. border-top: none;
    33. border-bottom: none;
    34. }
    35. th:first-child {
    36. visibility:hidden;
    37. padding: none;
    38. border-collapse: collapse;
    39. }
    40. td {
    41. border: transparent;
    42. padding: none;
    43. width: 1500px;
    44. font-family: "Arial", monospace;
    45. font-weight: 300;
    46. color: #333;
    47. text-align: left;
    48. }
    49.  
    50. tr:nth-child(odd) td {
    51. background-color: transparent;
    52. }
    53.  
    54. #myStatsTable{
    55. float: left;
    56. margin-right: 20px;
    57. }

    Final result:

    Site favicondynamic image

    If I solved your problem, please select "yes" above

Answers

  • Answer ✓

    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.

    If I solved your problem, please select "yes" above

  • Interesting, how exactly would that work?

  • Answer ✓

    I used a DDX brick + a webform. This is the DDX brick I am using: Site faviconappstore

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

    My Webform:

    DDX Brick code:

    Javascript:

    1. var domo = window.domo;
    2. var datasets = window.datasets;
    3. var myDataTable = document.getElementById('myDataTable');
    4.  
    5. // Data Column Names
    6. var dataColumnName = 'Image URL';
    7.  
    8.  
    9. // Form the data query
    10. var select = [dataColumnName];
    11. var query = `/data/v1/${datasets[0]}?select=${select.join()}
    12.  
    13. &filter='Image URL'!=null`;
    14.  
    15.  
    16. // Get the data and build table
    17. domo.get(query, {format: 'array-of-arrays'}).then(buildTableGrid);
    18.  
    19. function buildTableGrid(data){
    20. // var max = 0, min = 0, total = 0;
    21. var totalTableHeaders = [data.columns[0]];
    22. var totalTable = [];
    23. data.rows.forEach(function(row, index){
    24. totalTable.push([row[0]])
    25. });
    26.  
    27. buildTable(myDataTable,
    28. totalTableHeaders,
    29. totalTable);
    30. }
    31.  
    32. function buildTable(tableEl, headers, data){
    33. // Build header row
    34. var thead = tableEl.appendChild(document.createElement('thead'));
    35. var headerRow = thead.appendChild(document.createElement('tr'));
    36. headers.forEach(function(h){
    37. var th = headerRow.appendChild(document.createElement('th'));
    38. th.innerText = h;
    39. });
    40. // Add table data rows
    41. var tbody = tableEl.appendChild(document.createElement('tbody'));
    42. var fragment = document.createDocumentFragment();
    43. data.forEach(function(row){
    44. fragment.append(getRow(row));
    45. });
    46. tbody.appendChild(fragment);
    47. }
    48.  
    49. function getRow(rowData){
    50. var rowEl = document.createElement('tr');
    51. rowData.forEach(function(d){
    52. debugger
    53. var td = rowEl.appendChild(document.createElement('td'));
    54. td.innerHTML = d;
    55.  
    56. });
    57. return rowEl;
    58. }

    HTML:

    1. <link href="//fonts.googleapis.com/css?family=Roboto+Mono:300" rel="stylesheet" type="text/css">
    2.  
    3. <table id="myDataTable"></table>

    CSS:

    1. body{
    2. font-size: 14px;
    3. }
    4.  
    5. table {
    6. border-collapse: collapse;
    7. }
    8. .column_heading {
    9. height:0px;
    10. }
    11. th {
    12. background-color: transparent;
    13. border: transparent;
    14. text-align: left;
    15. padding: 0px;
    16. color: #333;
    17. border-top: 0px;
    18. }
    19. .form-matrix-row-headers {
    20.  
    21. display : none !important;
    22.  
    23. }
    24.  
    25. th:nth-child(1){
    26.  
    27. display: none;
    28.  
    29. }
    30. table tr th {
    31. border: transparent;
    32. border-top: none;
    33. border-bottom: none;
    34. }
    35. th:first-child {
    36. visibility:hidden;
    37. padding: none;
    38. border-collapse: collapse;
    39. }
    40. td {
    41. border: transparent;
    42. padding: none;
    43. width: 1500px;
    44. font-family: "Arial", monospace;
    45. font-weight: 300;
    46. color: #333;
    47. text-align: left;
    48. }
    49.  
    50. tr:nth-child(odd) td {
    51. background-color: transparent;
    52. }
    53.  
    54. #myStatsTable{
    55. float: left;
    56. margin-right: 20px;
    57. }

    Final result:

    Site favicondynamic image

    If I solved your problem, please select "yes" above

Welcome!

It looks like you're new here. Members get access to exclusive content, events, rewards, and more. Sign in or register to get started.
Sign In