Very Simple Question on how to get data

Hi,

I am not familiar with how to retrieve data from a dataset. Ive tried taking premade bricks and trying to learn from that. The dataset I have is 1 row with 3 columns. I assume I would just create variable name and assign the value to the column. However, I have no idea how to get it to display. I am comfortable in HTML and CSS but since the data set updates daily I need it to change the brick daily. Any resources would be greatly appreciated, all I need is to figure out how to import those three columns (They do not need to be queried they just need to display the values they already have ) so I can change how they are displayed on the brick in CSS. Thank you

Var Date = ['date']

Var Working_Day = ['running working days']

etc.

Best Answers

  • MarkSnodgrass
    Answer ✓

    When using Bricks, you will be querying your data using the JavaScript section of the brick. Your question really becomes a JavaScript question. If you haven't reviewed this section of the Domo Developer Docs, I would recommend looking through their tutorials.

    https://developer.domo.com/portal/0037739ab3747-domo-bricks-overview

    **Check out my Domo Tips & Tricks Videos

    **Make sure to <3 any users posts that helped you.
    **Please mark as accepted the ones who solved your issue.
  • ellibot
    ellibot Contributor
    Answer ✓

    @ColinHaze take a look at this tutorial video and the GitHub repo in the comments:


    You'll need to first use the Domo Data or SQL API to get the data from the dataset:

    domo.post(/sql/v1/${datasets[0]}, SQL QUERY HERE, {contentType: 'text/plain'}).then(handleResult);

  • Zen
    Zen Member
    Answer ✓

    hi @ColinHaze, I also faced the same issue as yours and experienced the same frustration. Spent few hours on this and figured it out. Sharing my solution with you.

    In the HTML tab,

    <!DOCTYPE html>
    <html lang="en">
    
    <body>
        <header>
            <h1>Test</h1>
        </header>
    
        <main>
            <div id="result"></div>
        </main>
    
    </body>
    </html>
    

    Then in JAVASCRIPT tab,

    var domo = window.domo;
    var datasets = window.datasets;
    
    // get the data
    domo.get(`data/v1/${datasets[0]}`).then(function(result){
    
      // assign the desired values
      var Date = result[0]['date']
      var Working_Day = result[0]['running working days']
    
      // link to html
      document.getElementById("result").innerHTML = "Today is the " + Working_Day + " of " + Date;
    });
    

    Hope this helps.

  • ArborRose
    ArborRose Coach
    edited February 27 Answer ✓

    And something that has driven me nuts….color and borders. Add the following to CSS.

    table {
    border-collapse: collapse;
    width: 100%;
    }

    th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
    }

    th {
    background-color: #4CABC5;
    color: white;
    font-weight: bold;
    }

    td:nth-child(3) {
    border-left: 3px solid black;
    border-right: 3px solid black;
    background-color: #A3D4E1;
    }

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

Answers

  • MarkSnodgrass
    Answer ✓

    When using Bricks, you will be querying your data using the JavaScript section of the brick. Your question really becomes a JavaScript question. If you haven't reviewed this section of the Domo Developer Docs, I would recommend looking through their tutorials.

    https://developer.domo.com/portal/0037739ab3747-domo-bricks-overview

    **Check out my Domo Tips & Tricks Videos

    **Make sure to <3 any users posts that helped you.
    **Please mark as accepted the ones who solved your issue.
  • ellibot
    ellibot Contributor
    Answer ✓

    @ColinHaze take a look at this tutorial video and the GitHub repo in the comments:


    You'll need to first use the Domo Data or SQL API to get the data from the dataset:

    domo.post(/sql/v1/${datasets[0]}, SQL QUERY HERE, {contentType: 'text/plain'}).then(handleResult);

  • ellibot and MarkSnodgrass, I appreciate yalls advice, as someone who has 0 JS experience I was unable to solve this simple issue. Its frustrating because I know its so simple LOL. I think Im going to just use a simple table instead of using a DDX Brick to display this sentence. "Today is the [column1] of [column2]"

  • Zen
    Zen Member
    Answer ✓

    hi @ColinHaze, I also faced the same issue as yours and experienced the same frustration. Spent few hours on this and figured it out. Sharing my solution with you.

    In the HTML tab,

    <!DOCTYPE html>
    <html lang="en">
    
    <body>
        <header>
            <h1>Test</h1>
        </header>
    
        <main>
            <div id="result"></div>
        </main>
    
    </body>
    </html>
    

    Then in JAVASCRIPT tab,

    var domo = window.domo;
    var datasets = window.datasets;
    
    // get the data
    domo.get(`data/v1/${datasets[0]}`).then(function(result){
    
      // assign the desired values
      var Date = result[0]['date']
      var Working_Day = result[0]['running working days']
    
      // link to html
      document.getElementById("result").innerHTML = "Today is the " + Working_Day + " of " + Date;
    });
    

    Hope this helps.

  • Go to the AppStore on the ribbon bar and search for Blank Brick or DDX Blank Brick. Pick a new dashboard or one you setup as a test. If you are appending, select your dashboard from the list. It will open with a new card. On that card it wants you to enter javascript in the first window, your html in the next, and your stylesheet information in CSS.

    The example already starts with some datasets that are setup. It should start with Example Sales Data as dataset[0]. So we can do a quite pull from it like this…

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • Expanding on my answer above…the following will retrieve the whole dataset.

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • ArborRose
    ArborRose Coach
    edited February 27 Answer ✓

    And something that has driven me nuts….color and borders. Add the following to CSS.

    table {
    border-collapse: collapse;
    width: 100%;
    }

    th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
    }

    th {
    background-color: #4CABC5;
    color: white;
    font-weight: bold;
    }

    td:nth-child(3) {
    border-left: 3px solid black;
    border-right: 3px solid black;
    background-color: #A3D4E1;
    }

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • Zen and ArborRose Thank you for guys for the help and Example Solutions!