CONTACT US
Powerful Domo DDX Bricks Co-Built by AI: 3 Examples to Boost AppDev Efficiency
Domo DDX Bricks are pre-built objects that enable users to author highly custom visualizations in a simplified manner. App development is normally a complex process that often requires the use of multiple tools and software platforms. As a result, many developers are now turning to Domo’s modern DataApps platform to leverage DDX bricks in building custom Domo Apps on top of their organization’s most critical data. In this article, find out not just how to leverage DDX Bricks, but also how to accelerate the process with code-writing artificial intelligence (AI) such as OpenAI‘s ChatGPT.
What are Domo DDX Bricks?
Domo DDX Bricks are a suite of analytics and visualization tools designed to make it easier for businesses to get insights from their data. DDX Bricks allow users to quickly create powerful visualizations with interactive features such as drag-and-drop, custom styling, filtering and sorting capabilities. Additionally, they provide access to hundreds of pre-built reports and dashboards that can be further customized for each user’s unique needs. With the help of Domo DDX Bricks, businesses can unlock powerful insights into their data.
This capability provides a foundation for easy integration with Domo DataSets, enabling teams to integrate multiple data sources seamlessly in the Domo platform before powering up their custom applications on top of enriched data.
Starting with your Domo DataSet in the background, Domo DDX Bricks enables you to use HTML, CSS, and JavaScript to quickly prototype an infinite number of possible business applications and custom data visualizations.
Using ChatGPT AI to Build Custom App Templates
ChatGPT leverages natural language processing and machine learning algorithms to construct complex coding templates from basic user prompts.
What makes ChatGPT so valuable in the AppDev process is its ability to convert verbal commands into code automatically, eliminating the need for manual template building. This frees up your development team to focus on more complex and valuable tasks earlier in the development lifecycle.
3 Examples of Rapid DDX Bricks Prototyping with ChatGPT
Consider these three examples of AI-built or AI-customized DDX Bricks (Domo) – constructing a customized Domo App is more efficient than ever before!
DDX BRICKS Example 1: ChatBot Domo app
In order to get started with building a Domo ChatBot UI, I went straight to ChatGPT and worked to devise a meaningful prompt that will enable the AI to give me the most helpful results:
Author Prompt:
Give me the code in HTML, JavaScript, and CSS to write an app.
Layout:
The app should have a header – How may I help you today?
The app should have an input box that is 5 rows deep and up to 100 characters wide
The app should have a button – Submit
The app should have a div that displays the results from clicking the Submit button
How the app works:
When the Submit button is clicked, the app should take the prompt from the input box, send it the https://api.openai.com/v1/completion and place it in the results div.
Please give the application a background image using this URL: https://www.graphable.ai/wp-content/uploads/2022/02/logo-stacked-vertical.png
Please give the input box and response div a light grey background
Please make the buttons blue with white text
ChatGPT Response:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
#container {
background-image: url("https://www.graphable.ai/wp-content/uploads/2022/02/logo-stacked-vertical.png");
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
padding-top: 50px;
}
#input-container {
background-color: lightgrey;
padding: 20px;
text-align: center;
margin: 20px;
}
#input-box {
width: 100%;
height: 100px;
padding: 10px;
}
#submit-btn {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
margin-top: 20px;
}
#response-container {
background-color: lightgrey;
padding: 20px;
text-align: center;
margin: 20px;
min-height: 100px;
}
</style>
</head>
<body>
<div id="container">
<h1>How may I help you today?</h1>
<div id="input-container">
<textarea id="input-box" rows="5" maxlength="100"></textarea>
<br>
<button id="submit-btn">Submit</button>
</div>
<div id="response-container"></div>
</div>
</body>
</html>
JavaScript:
const inputBox = document.getElementById("input-box");
const submitBtn = document.getElementById("submit-btn");
const responseContainer = document.getElementById("response-container");
submitBtn.addEventListener("click", async () => {
const input = inputBox.value;
const response = await fetch(`https://api.openai.com/v1/completion`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
prompt: input,
}),
});
const data = await response.json();
responseContainer.innerHTML = data.choices[0].text;
});
CSS:
#container {
background-image: url("https://www.graphable.ai/wp-content/uploads/2022/02/logo-stacked-vertical.png");
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
padding-top: 50px;
}
#input-container {
background-color: lightgrey;
padding: 20px;
text-align: center;
margin: 20px;
}
#input-box {
width: 100%;
height: 100px;
padding: 10px;
}
The most impressive part? If we copy those over into the DDX Bricks (Domo) programming interface, we get the following result:
This does require some polishing to use the OpenAI API code in DDX Bricks (Domo) – but what a valuable place to start from. The level of effort required to make some modifications is minimal compared to a starting from scratch.
DDX BRICKS EXAMPLE 2: Employee Time Tracking Domo app
Once again, I want to emphasize the importance of writing a prompt that ChatGPT can digest well to produce a meaningful result.
Author Prompt:
Give me the code in HTML, JavaScript, and CSS to write an app.
Layout:
The app should have a header – Company Time App
The app should have a row with four elements: an input box labeled “Time Code:”, a drop down menu with the options (Client 1, Client 2, Client 3, Client 4) labeled “Clients:”, a drop down menu with the options (Shadowing, Connect, Transform, Visualize, Review, Design) labeled “Category:”, and an input box labeled “Time (hr):”
Below that row, the app should have a button – Submit
How the app works:
When the Submit button is clicked, the app should take the prompt from the input box, send it as the body of an email to the email address example@graphable.ai with the subject line “Time Entry”
Please give the application a background image using this URL: https://media.istockphoto.com/id/1389238948/photo/hand-touching-global-networking-on-data-connection-science-big-data-internet-technology.jpg?b=1&s=170667a&w=0&k=20&c=SUBScgOOFqyQV1923W65vtVl_CuBPnZ75flPH3WK6-U=
Please make the fonts white
Please give the input boxes and drop down menu’s a light grey background
Please make the buttons blue with white text
Please make ensure the overall style is modern with features like shading, rounded edges, and changing border colors when I hover on elements
ChatGPT Response:
HTML:
<html>
<head>
<style>
/* CSS styles go here */
</style>
</head>
<body>
<header>Company Time App</header>
<div class="input-row">
<label for="timeCode">Time Code:</label>
<input id="timeCode" type="text" />
<label for="clients">Clients:</label>
<select id="clients">
<option>Client 1</option>
<option>Client 2</option>
<option>Client 3</option>
<option>Client 4</option>
</select>
<label for="category">Category:</label>
<select id="category">
<option>Shadowing</option>
<option>Connect</option>
<option>Transform</option>
<option>Visualize</option>
<option>Review</option>
<option>Design</option>
</select>
<label for="time">Time (hr):</label>
<input id="time" type="text" />
</div>
<button id="submit">Submit</button>
<script>
// JavaScript code goes here
document.getElementById("submit").addEventListener("click", function() {
const timeCode = document.getElementById("timeCode").value;
const clients = document.getElementById("clients").value;
const category = document.getElementById("category").value;
const time = document.getElementById("time").value;
window.location.href =
"mailto:carter@graphable.ai?subject=Time Entry&body=" +
encodeURIComponent(
"Time Code: " +
timeCode +
"\nClients: " +
clients +
"\nCategory: " +
category +
"\nTime (hr): " +
time
);
});
</script>
</body>
</html>
CSS:
body {
background-image: url(https://media.istockphoto.com/id/1389238948/photo/hand-touching-global-networking-on-data-connection-science-big-data-internet-technology.jpg?b=1&s=170667a&w=0&k=20&c=SUBScgOOFqyQV1923W65vtVl_CuBPnZ75flPH3WK6-U=);
font-family: sans-serif;
color: white;
}
header {
text-align: center;
font-size: 36px;
padding: 20px;
}
.input-row {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
label {
font-size: 18px;
margin-right: 20px;
}
input[type="text"],
select {
background-color: lightgrey;
padding: 10px;
JavaScript:
const submitButton = document.querySelector('.submit-button');
submitButton.addEventListener('click', () => {
const timeCode = document.querySelectorAll('.input-box')[0].value;
const client = document.querySelector('.dropdown-menu')[0].value;
const category = document.querySelector('.dropdown-menu')[1].value;
const time = document.querySelectorAll('.input-box')[1].value;
const subject = 'Time Entry';
const body = `Time Code: ${timeCode} \nClient: ${client} \nCategory: ${category} \nTime (hr): ${time}`;
const email = 'mailto:carter@graphable.ai?subject=' + subject + '&body=' + body;
window.location.href = email;
});
And once again, pasting this into DDX Bricks (Domo) UI, we have a successful template build in a matter of minutes:
Once again, there’s a bit of work to be done to get this to a finished product – but this represents a significant head start towards an efficient overall AppDev project.
DDX BRICKS EXAMPLE 3: Customized Version of Domo’s Python DDX Brick
This time we will take a slightly different approach, where we prompt ChatGPT with our requested updates and some code we have to start with:
Author Prompt:
Consider the following update I would like to make to this JavaScript and HTML:
1. I would like to replace the open input box with a drop down menu that includes the following options:
1. sum([1,2,3,4,5])
2. count([1,2,3,4,5])
3. average([1,2,3,4,5])
Starter Code:
JavaScript:
// DDX Bricks Wiki - See https://developer.domo.com/docs/ddx-bricks
// for tips on getting started, linking to Domo data and debugging your app
//Step 1. Select your data from the link in the bottom left corner
//---------------------------------------------------
// For ultimate flexibility, modify the code below!
//---------------------------------------------------
//Available globals
var domo = window.domo;
var datasets = window.datasets;
var output = document.getElementById('output');
var code = document.getElementById('code');
var runButton = document.getElementById('runButton');
output.value = 'Initializing...';
if(!(pyodide && pyodide.runPythonAsync)){
globalThis.__pyodideLoading = false; // Set to false when this DDX Brick is reloaded
}
// init Pyodide
var pyodideReadyPromise = loadPyodide({ indexURL : 'https://cdn.jsdelivr.net/pyodide/v0.17.0/full/' });
pyodideReadyPromise.then(function(){
runButton.disabled = false;
runButton.classList.remove('disabled')
output.value += 'Ready!\n';
});
runButton.onclick = function evaluatePython() {
pyodide.runPythonAsync(code.value)
.catch(function(err){ addToOutput(err); })
.then(function(output){ addToOutput(output); })
}
function addToOutput(s) {
output.value += '>>> ' + code.value + '\n' + s + '\n';
output.scrollTop = output.scrollHeight;
}
HTML:
<script src="https://cdn.jsdelivr.net/pyodide/v0.17.0/full/pyodide.js"></script>
<link href="//fonts.googleapis.com/css?family=Roboto+Mono:600,400,300" rel="stylesheet" type="text/css">
<div class="flexWrapper">
<p>You can execute any Python code. Just enter something in the box below and click the "Run" button.</p>
<div id="inputWrapper">
<input id='code' value='sum([1, 2, 3, 4, 5])'>
<button id="runButton" class="disabled" disabled>Run</button>
</div>
<div id="outputWrapper">
<label for="output">Output:</label>
<textarea id='output' class="light" rows='6' disabled></textarea>
</div>
</div>
ChatGPT Response:
Replace the following code in the HTML:
<input id='code' value='sum([1, 2, 3, 4, 5])'>
With this:
<select id="code">
<option value="sum([1,2,3,4,5])">sum([1,2,3,4,5])</option>
<option value="count([1,2,3,4,5])">count([1,2,3,4,5])</option>
<option value="average([1,2,3,4,5])">average([1,2,3,4,5])</option>
</select>
This is a simple example, but it shows how one can update code in minutes or even seconds with little effort and no headache thanks to the power of ChatGPT.
While in this scenario, I’ve updated the options to be 3 simple formulas – one could imagine the possibilities this gives to take a much more complicated python script and store it as an option within the drop-down.
Conclusion
Domo DDX bricks provide a foundation for easy integration and a platform to build custom apps on top of enriched data while ChatGPT’s natural language processing and machine learning algorithms make it possible for developers to construct complex coding templates quickly and efficiently.
If you’re looking to streamline your app development process and take advantage of the latest advancements in customizable DDX bricks (Domo) technology, Contact Us today to learn more about how we can help rapidly solution your custom DataApps. Read here to understand in detail how to find a best-fit business intelligence consultant partner.
Related Articles
- AI in Drug Discovery – Harnessing the Power of LLMs
- AI consulting guidebook
- What is ChatGPT? A Complete Explanation
- Domo custom apps using Domo DDX Bricks with the assistance of ChatPGT
- Resolution for various ChatGPT errors, including ChatGPT Internal Server Error
- Understanding Large Language Models (LLMs)
- What are Graph Algorithms?
- What is Neo4j Graph Data Science?
- What is ChatGPT? A Complete Explanation
- ChatGPT for Analytics: Getting Access & 6 Valuable Use Cases
- What is Prompt Engineering? Unlock the value of LLMs
- LLM Pipelines / Graph Data Science Pipelines / Data Science Pipeline Steps
- Using a Named Entity Recognition LLM in a Biomechanics Use Case
- What is Databricks? For data warehousing, data engineering, and data science
Graphable helps you make sense of your data by delivering expert data analytics consulting, data engineering, custom dev and applied data science services.
We are known for operating ethically, communicating well, and delivering on-time. With hundreds of successful projects across most industries, we have deep expertise in Financial Services, Life Sciences, Security/Intelligence, Transportation/Logistics, HighTech, and many others.
Thriving in the most challenging data integration and data science contexts, Graphable drives your analytics, data engineering, custom dev and applied data science success. Contact us to learn more about how we can help, or book a demo today.
Still learning? Check out a few of our introductory articles to learn more:
- What is a Graph Database?
- What is Neo4j (Graph Database)?
- What Is Domo (Analytics)?
- What is Hume (GraphAware)?
Additional discovery:
- Hume consulting / Hume (GraphAware) Platform
- Neo4j consulting / Graph database
- Domo consulting / Analytics - BI
We would also be happy to learn more about your current project and share how we might be able to help. Schedule a consultation with us today. We can also discuss pricing on these initial calls, including Neo4j pricing and Domo pricing. We look forward to speaking with you!
Graphable helps you make sense of your data by delivering expert analytics, data engineering, custom dev and applied data science services.
We are known for operating ethically, communicating well, and delivering on-time. With hundreds of successful projects across most industries, we have deep expertise in Financial Services, Life Sciences, Security/Intelligence, Transportation/Logistics, HighTech, and many others.
Thriving in the most challenging data integration and data science contexts, Graphable drives your analytics, data engineering, custom dev and applied data science success. Contact us to learn more about how we can help, or book a demo today.
We are known for operating ethically, communicating well, and delivering on-time. With hundreds of successful projects across most industries, we thrive in the most challenging data integration and data science contexts, driving analytics success.
Contact us for more information:
