Creating Interactive Web Experiences Using T-SQL.APP: A Deep Dive
In this document, we explore how T-SQL.APP enables developers to build fully interactive, engaging web experiences using nothing but T-SQL code. By combining SQL with custom stored procedures designed for UI interactivity, T-SQL.APP provides a unique, low-code solution for creating decision-driven applications. This document showcases the power and simplicity of T-SQL.APP, illustrated through a fun pizza-ordering app.
Overview
T-SQL.APP redefines what is possible with SQL by enabling developers to control not only data but also the front-end user experience. By using SQL commands (action scripts) directly from the built-in IDE in the web app, you can create interactive modals, ask users questions, collect responses, and display personalized feedback—all without the need for HTML, CSS, or JavaScript. This approach democratizes app development, allowing SQL users to build sophisticated applications quickly and efficiently.
Key Features Demonstrated
1. Dynamic User Prompts with SQL
Using SQL commands like sp_api_modal_sure, T-SQL.APP lets you create interactive prompts that feel more like a conversation than a traditional form. In our pizza app, we use prompts such as:
- "Do you dare to put pineapple on your pizza?"
- "Should we make it extra cheesy?"
Each prompt includes unique options, humor, and emojis, making the interaction playful and memorable.
2. Conditional Responses Based on User Choices
With T-SQL.APP, SQL variables capture user responses, allowing the app to display different messages based on these choices. For example:
- If a user adds pineapple, they receive a humorous message acknowledging their adventurous choice.
- If they opt for extra cheese, they get a lighthearted warning about needing "stretchy pants."
This type of conditional logic makes the app feel responsive and personalized, even though it’s running on SQL alone.
3. Toasts for Real-Time Feedback
T-SQL.APP supports sp_api_toast commands, which allow the app to show small, temporary messages as feedback to the user. These toasts appear in real time as users make choices, providing quick acknowledgment or humorous reactions to each decision, like:
- "Pineapple crisis averted!"
- "Cheese level: Over 9000!"
This feature helps keep the interaction flowing, enhancing user engagement.
4. User-Friendly UI Elements Controlled by SQL
T-SQL.APP enables SQL to act as the controller for front-end elements. It offers:
- Buttons with clear labels and icons for each option
- Modals for questions and responses, formatted with styles like h2 for headers
- Finish buttons to complete interactions
These elements, traditionally controlled by frontend code, are defined in SQL, simplifying the development process and focusing on a unified approach.
5. Easy Closure and Clear Feedback
T-SQL.APP lets you clear the modal with a single command and provides a final toast message, like "Enjoy your perfect (or perfectly controversial) pizza!" to end the interaction on a positive note. This single-command closure wraps up the user’s journey seamlessly, leaving a satisfying impression.
Complete T-SQL.APP Source Code
Here’s the complete T-SQL source code for the pizza-ordering app. This single script is all that’s required to run the entire interactive experience in T-SQL.APP.
/*
This script creates a fun interactive experience for the user, asking them about their pizza preferences with emojis and humorous messages. It uses sp_api_modal_sure to ask yes/no questions about pineapple on pizza and extra cheese, then provides funny responses based on the user's choices. The script follows T-SQL.APP best practices by preparing variables before passing them to stored procedures and using context-aware variables.
*/
-- Declare variables for our pizza choices
DECLARE @pineapple_on_pizza bit;
DECLARE @extra_cheese bit;
-- Synchronize values with the client
EXEC sp_api_modal_get_value @name='@pineapple_on_pizza', @value=@pineapple_on_pizza OUT;
EXEC sp_api_modal_get_value @name='@extra_cheese', @value=@extra_cheese OUT;
-- Set the mood with a title
EXEC sp_api_modal_text @text=N'🍕 Ultimate Pizza Decision Time! 🍕', @class='h2';
-- Ask about pineapple on pizza
DECLARE @pineapple_question nvarchar(max) = N'Do you dare to put pineapple on your pizza? 🍍😱';
EXEC sp_api_modal_sure
@alert_text=@pineapple_question,
@value=@pineapple_on_pizza OUT,
@seed=N'pineapple_pizza',
@button_true=N'Yes, I''m brave! 💪',
@button_false=N'No way! 🙅♂️';
-- Ask about extra cheese
DECLARE @cheese_question nvarchar(max) = N'Should we make it extra cheesy? 🧀🧀🧀';
EXEC sp_api_modal_sure
@alert_text=@cheese_question,
@value=@extra_cheese OUT,
@seed=N'extra_cheese',
@button_true=N'Cheese me up! 😋',
@button_false=N'I''m good, thanks 😊';
-- Process user responses with some humor
IF @pineapple_on_pizza = 1
BEGIN
EXEC sp_api_modal_text @text=N'🍍 Pineapple added! You''re either a culinary genius or a pizza rebel! 🎸', @class='text-warning';
EXEC sp_api_toast @text=N'Pineapple: Making pizza controversial since forever! 😂', @class='warning';
END
ELSE
BEGIN
EXEC sp_api_modal_text @text=N'No pineapple for you. Playing it safe, huh? 😉', @class='text-info';
EXEC sp_api_toast @text=N'Pineapple crisis averted! 😅', @class='success';
END
IF @extra_cheese = 1
BEGIN
EXEC sp_api_modal_text @text=N'🧀 Extra cheese coming up! Hope you brought your stretchy pants! 👖', @class='text-info';
EXEC sp_api_toast @text=N'Cheese level: Over 9000! 🚀', @class='success';
END
ELSE
BEGIN
EXEC sp_api_modal_text @text=N'Regular cheese it is. Keeping it classy! 🎩', @class='text-info';
EXEC sp_api_toast @text=N'Cheese level: Just right! 👌', @class='success';
END
-- Add a 'Finish' button to close the modal
DECLARE @finish_button nvarchar(128);
EXEC sp_api_modal_get_value @name='@finish_button', @value=@finish_button OUT;
EXEC sp_api_modal_button
@name='finish',
@value=N'Finish and Eat! 🍽️',
@class='btn-primary',
@valueout=@finish_button OUT;
IF @finish_button IS NOT NULL
BEGIN
EXEC sp_api_modal_clear;
EXEC sp_api_toast @text=N'Enjoy your perfect (or perfectly controversial) pizza! 🍕😄', @class='success'
--, @speech=N'Enjoy your perfect (or perfectly controversial) pizza!',@speech_lang='en-en'
;
RETURN;
END
Key Benefits of T-SQL.APP
The pizza-ordering example illustrates several key benefits of T-SQL.APP:
1. Minimal Code, Maximum Impact
With a single SQL script, developers can build a complete interactive experience. This reduces development time and minimizes the need for additional front-end code, making it ideal for low-code environments.
2. SQL as a Frontend Driver
T-SQL.APP leverages SQL in ways traditionally reserved for frontend technologies. By embedding UI elements and logic directly into SQL, it empowers SQL-savvy developers to build user-facing applications without learning complex JavaScript or UI frameworks.
3. Effortless User Engagement
T-SQL.APP’s interactive elements, including buttons, toasts, and modals, allow developers to engage users with personalized responses, humor, and real-time feedback. This fosters a more dynamic and enjoyable user experience.
4. Versatile for Rapid Prototyping and Business Apps
The simplicity of T-SQL.APP makes it a powerful tool for rapid prototyping or building internal tools. Businesses can quickly gather user preferences, collect feedback, or create interactive data entry forms, all within the familiar environment of SQL.
Conclusion
T-SQL.APP demonstrates a paradigm shift in how SQL can be used—not just for data handling but as a complete solution for interactive applications. By combining SQL with intuitive stored procedures for UI control, T-SQL.APP enables anyone with SQL knowledge to build engaging, data-driven apps. This technology is ideal for businesses looking to streamline development, bring prototypes to life quickly, and empower their SQL users with tools that turn database interactions into full-fledged applications.
If you’re ready to experience a new way of creating web solutions, T-SQL.APP is your gateway to a world where SQL does it all, from backend logic to user interaction. Start building with T-SQL.APP today, and discover how easy and enjoyable app development can be!