Import DataApp
Last updated
Last updated
If you have DataApps developed using popular frameworks like ReactJS and Streamlit, you can use the Import DataApp functionality to seamlessly integrate them into your project. To ensure a smooth integration, it’s important to select the correct DataApp type during the import process. If the wrong type is chosen, the DataApp may not function as expected.
Once your DataApp is successfully uploaded, the platform will automatically generate the relevant graphs and visualizations to enhance your user experience. Additionally, you can extend the functionality of your DataApp by integrating AskAI capabilities directly into the code. This allows you to query and analyze the data within your DataApp, providing a more interactive and dynamic experience.
This feature not only makes it easier to bring in DataApps from external sources, but it also gives you the power of AI-driven queries to unlock deeper insights from your data, creating a more customized and flexible experience.
Follow these steps to import DataApps developed using ReactJS or Streamlit:
Hover over the menu icon and select Projects.
Select the project for which you want to create DataApps and click the DataApps icon from the project-level navigation.
Click the plus icon and select Import DataApp (or) click Import DataApp if there are no DataApps created in the project. This opens the Create DataApp page.
Specify the following information on the Details tab:
DataApp Name: Enter the name of the DataApp.
DataApp Description: Provide a description for the DataApp.
Environment: Choose the desired environment for running the DataApp.
Choose Image: Upload an image to display on the DataApp card.
Click Upload and select a ZIP file containing your DataApp code. You can use sample ZIP files to test the import feature or get started quickly.
Select the DataApp Type (Streamlit or ReactJS) based on the framework using which the DataApp has been developed.
Select the Python version in which the Streamlit DataApp was developed. It supports only two versions of Python - 3.8 and 3.10. However, selecting Python 3.8 version may have slower launch times and limited SDK support.
Add metadata details in JSON format (key-value pairs).
Click Create to complete the process. The DataApp will now appear as a card on the DataApps page, where you can open it to view the graphs or interact with the DataApp.
Perform the following actions clicking the Actions drop-down:
Modify the code of the imported ReactJS DataApp, using the Edit Code Option. For more details, see Editing the Code of Imported ReactJS DataApps section.
Copy the dataapps URL to share with the other business users, using the Copy option.
Open the dataapps on a new tab, using the Open in New Tab option.
View logs of DataApps to debug issues, using the Logs option.
Download the code to edit, using the Download Code option.
Delete the DataApp that is no longer required, using the Delete option.
Customize the branding appearance of your DataApp, using the Branding option. This opens the Branding modal. Enter your desired title in the DataApp Title field, then use the Upload from Computer option to upload your logo. Once you have added the title and logo, click Save to apply the changes. The customized title and logo will now appear on the AskAI page and will also be visible when the DataApp is opened in a new tab.
You can directly edit the code of imported ReactJS DataApps within the platform using the Edit Code option available in the kebab menu of each externally developed DataApp card. This opens the Bolt Editor, a fully integrated development environment where you can:
Modify and preview changes in real time
Compare original and modified code
Download or sync files with your local directory
Publish updates or reset to the original version
This feature enables data scientists and other users to seamlessly customize, debug, and manage their DataApps within the platform.
Steps to Edit the Code
Open the Project Navigate to the project containing the imported DataApp you want to edit. This opens the canvas page.
Go to DataApps From the left navigation panel, select DataApps. This displays the list of available DataApp cards.
Open the Bolt Editor Hover over the relevant DataApp card, click the kebab menu (three vertical dots), and select Edit Code. This opens the Bolt Editor.
Bolt Editor Overview
The Bolt Editor provides three key tabs to support your development workflow:
Code Modify the source code of the imported ReactJS DataApp. The full codebase is accessible within the editor. You can update logic, layout, styles, or components.
Click Save to apply changes. This option becomes available only after changes are made. Use Undo to revert unsaved changes.
Diff Review a side-by-side comparison of the current version and the original source code. This helps ensure version control and avoids unintended changes.
Preview View a live rendering of the updated DataApp directly within the editor. You can validate UI behavior, test interactions, and ensure the app works as expected—without publishing the changes.
Download Code Download the complete codebase for offline editing.
Sync Files Sync DataApp files between the platform and your local directory.
Toggle Terminal Open a built-in terminal to view real-time logs, track errors, and monitor background processes.
Reset Code Revert to the last published version and discard all unpublished changes.
Publishing Changes
Once your changes are complete, click Publish to apply them to the DataApp. The updates will be reflected in the deployed version of your app.
Modify the DataApp details, using the Edit option. For more details, see section.
Configure the shutdown time of the DataApp, using the Config option. See section for more details.
