Sisense Compose SDK
Sisense Compose SDK The Future is Composable In the fast-paced world of data-driven applications, developers are constantly seeking innovative ways to create customized data products that seamlessly integrate into their projects. Sisense has stepped up to the challenge with its groundbreaking Compose SDK, which has fundamentally changed the game. This powerful toolkit empowers developers to harness the full potential of Sisense components, enabling them to craft data products that are not only highly customized but also perfectly tailored to their applications. Traditionally, the embedded analytics market constrained developers within the boundaries of their chosen tools. However, Compose SDK breaks free from this limitation. Instead of merely embedding a third-party tool, developers now have the freedom to build bespoke data products by selecting from a rich library of Sisense components and seamlessly integrating them with a wide range of other tools within their Integrated Development Environment (IDE). A Practical Example In the world of UI design, consistency is key. Imagine your company has chosen the Material UI framework to style your application. It provides a sleek and uniform look, but now you need to populate Material UI tables with dynamic data from Sisense. Enter Compose SDK. With it, you can seamlessly merge Material UI's aesthetics with Sisense's analytical power. Start with Material UI tables that align perfectly with your design guidelines. Then, using the Compose SDK's ExecuteQuery component, you effortlessly infuse these tables with real-time data from Sisense. The result? Stunning, data-rich components that not only adhere to your design principles but also deliver invaluable insights. Your users get the best of both worlds - visually appealing design and powerful data. Get Started with Compose SDK Excited to explore the potential of the Compose SDK? Good news - it's currently in Beta and available to all Sisense partners, ready for you to harness its capabilities today. To embark on your journey, you can begin by cloning the example repository from GitHub listed below. To install the necessary packages for your sample application, follow the user-friendly Compose SDK Quickstart Guide. Keep in mind that, for the time being, these packages are accessible on GitHub, requiring a personal access token for access. In conclusion, Sisense's Compose SDK represents a revolutionary leap forward in the world of data product development. It empowers developers to break free from the constraints of traditional embedded analytics and build highly customized, seamlessly integrated data products. With the Compose SDK, the possibilities are limitless, and the power to transform your applications lies at your fingertips. So, why wait? Dive into the world of Compose SDK, unleash your creativity, and revolutionize your data products today. Your applications will thank you for it! Credit: Sample Application initially developed by Sisense Senior Director of Field Engineering: Tom Linton Compose SDK -- Material UI Example Sisense Quick Start Guide Sisense GithubElevate Your Data Product’s Quality with Streamlined Version Control leveraging Our Git Integration
Elevate Your Data Product’s Quality with Streamlined Version Control Leveraging the Sisense Git Integration! In today's CI/CD ecosystems, efficient asset migration from development to production environments is crucial for delivering high-quality data products. Sisense being a leading embedded analytics technology offers a powerful Git integration that simplifies and enhances the migration process. In this blog, we will explore leveraging the Sisense Git Version Control to streamline asset migration, ensuring smooth transitions and maintaining data product integrity. To understand the value of Sisense Git Version Control it is important to understand what Git is. Git offers users (often developers and/or engineers) a structured and efficient approach to managing files, collaborating with others, and maintaining a clear history of changes. Git enhances team productivity, reduces errors, and provides a sense of control over projects. Teams who leverage Git ultimately benefit from better organization, teamwork, and effective management of files and projects. When building your data products in a technology like Sisense, there is massive value in integrating with your developer’s CI/CD workflow for continuity, quality, and time to delivery. Users who leverage the Sisense Git Version Control can collaborate on building data products, manage changes to products over time, and migrate assets across Sisense environments through remote Git repositories. The Sisense Git Integration is a feature that is offered out of the box with Sisense Linux Version(s) 2022.10 and up. To begin leveraging the Sisense Git Integration feature you can click on the Git Logo in the top right of your Sisense environment. The Git GUI will open in a separate browser tab and you will be asked to create a new project. After creating a new project your team will be prompted to name the project, name the default branch, and if you desire to connect to a remote Git repository (further instructions are included in Sisense Git Documentation depending on which Git repository your team leverages). After these steps are complete you can choose to invite others to collaborate with you on the project. If you choose collaborators or decide to lone-wolf a project you will be asked next if you’d like to “add assets” to the project. Do not worry lonely wolves, if you would like to invite collaborators down the road you can share the project after the fact. Assets available to modify/track in Sisense Git Version Control are Data Models and Dashboards, or you can simply continue without if you intend to “Pull” Sisense assets from a remote repository. Once a team has created and defined a project, they can start working. Users familiar with Git will find continuity in terminology and functionality with the Sisense Git GUI and popular Git repositories. Dashboards and Models are compressed into JSON files, allowing users to review, commit, or discard changes. Teams can create branches, checkout branches, and revert changes if needed. When a project is ready to progress to the next stage, users can "Push" the assets/branches to the remote repository. The assets can be reviewed in their JSON format in the remote repository. If a CI/CD pipeline includes QA, Staging, or Production Sisense environments, users can leverage the Git GUI in those environments to "Pull" assets for review or publication. So let’s land this plane! The Sisense Git Integration is a tool that provides tremendous value to your developer/engineering team's workflow, while significantly improving your business with better data product quality and delivery. If your team already leverages Git, this tool will be easy to incorporate and drive value. For users unfamiliar with Git, we strongly recommend adopting this approach, as it only involves a minimal learning curve but offers improved version control, streamlined asset migration, and overall enhanced quality. We hope this informationModifying Simply Ask Natural Language Query Generated Widgets with Scripting
Sisense's Simply Ask feature empowers users to create visualizations instantly by asking natural language questions, simplifying data exploration without needing technical expertise or manual widget configuration. This Natural Language Query (NLQ) capability accelerates data exploration and insights generation without needing to manually create new Sisense widgets through the standard UI for each question or data relationship of interest. However, these automatically generated widgets differ from standard widgets in that they do not trigger typical widget scripting events, which poses a challenge for applying custom modifications. This limitation can hinder the application of standard dashboard and widget scripting customizations directly to these widgets. Fortunately, it is possible to modify NLQ-generated widgets programmatically by using JavaScript to manipulate the HTML of the fully rendered widgets without relying on Sisense-specific widget scripting events. This approach involves observing changes in the Simply Ask modal DOM and applying custom code when new widgets are rendered. This article explores how to implement such customizations, providing code examples and notes to help customize NLQ-generated Simply Ask widgets.Using "useGetWidgetModel" to Embed an Existing widget in ComposeSDK
Loading Widget Metadata with the useGetWidgetModel function Leveraging the useGetWidgetModel ComposeSDK function provides a middle ground way of embedding existing Sisense widgets. It allows automating return of widget metadata from an existing Sisense widget, facilitating dynamic modifications within ComposeSDK. This method balances somewhat the autonomy of entirely recreating a widget as a native ComposeSDK widget and rendering a widget directly as a Dashboard Widget.Converting an Existing Sisense Widget to a Dynamic ComposeSDK Widget Component
Using either the widget Sisense API's, or the Sisense widget JS API object, it is possible to determine all components and parameters of a widget required to create an equivalent dynamic ComposeSDK widget component. This approach allows the extraction of all components and parameters of a widget, enabling the creation of an equivalent dynamic ComposeSDK widget component without directly referencing or relying on a specific widget or dashboard ID. The metadata of an existing widget contains all the information needed to create a dynamic version of an existing Sisense widget. It is also possible to use an existing widget ID and dashboard ID to render an existing widget in ComposeSDK, but this does not take full advantage of the capabilities of ComposeSDK to generate new widgets directly.
BloX - A Technical Introduction
BloX - A Technical Introduction To start, download the attached file ‘BloXTutorial-Styling.dash’ file and import this into your Sisense environment. This dashboard uses the ‘Sample Ecommerce’ data model and contains all iterations of the BloX widget. If connecting the .dash file to your Sample Ecommerce data model does not work, the attached file ‘BloX-Tutorial-ECommerce-DataModel.zip’ contains a version of this data model that will work. Additionally, ensure BloX is already enabled on your Sisense environment. Step 1 - BloX Structure In the first iteration of this BloX widget, we start with a BloX structure as depicted in the image above. In our widget, we have: Country name panel item in the header TextBlock Three TextBlocks in the left column Profit Profit Margin Units Sold Three TextBlocks in the right column Profit panel item Profit Margin panel item Units Sold panel item It is worth noting that with the ‘showCarousel’ attribute set to ‘true’, only one Country will display at a time. Now that we understand the layout of the BloX widget, let’s add some styling to make it look more presentable. Step 2 - Styling I also encourage you to play around with the values of each property to get a better understanding of how these affect the widget. Contai ner style block In our Container, we’ve added a style element with padding, width, and two margin types. We can use these CSS properties to manipulate the Container element of our BloX widget. In this example, they are dictating the position of the container and, therefore all of the text within. Country panel TextBlock In our Country TextBlock, we’ve added three text styling elements: weight, color, and size. We can use these BloX elements to manipulate how a TextBlock is styled rather than using CSS properties. Note that the size element has also been added to the other TextBlocks as well. Notice that the CSS properties need to be used within a style element while the BloX elements do not. The BloX elements provide easy access to commonly used style properties. However, you will see we can accomplish the same using the style element. Step 3 - More Styling The third iteration of our BloX widget adds background coloring and a border radius. This gives our widget a much more presentable ‘card’ feel. Note: we’ve added a second container within our first container because the padding property conflicts with the border-radius property. Container style block 2 Here, we’ve added the border-radius property to give the container’s edges a sleeker, rounded feel. We also added the overflow property to prevent text from leaving the container. TextBlocks In each text block, we’ve removed the TextBlock attributes and replaced them with CSS properties. Using style elements, we have more control over the look and feel with CSS. The background-color property visually separates each row of text. Using the style attributes gives more control over the widget, but the code in our Editor can become redundant, bulky, and difficult to read. We can help alleviate this using CSS classes. Step 3.5 - CSS Classes The widget in this iteration looks identical to the previous version. However, we consolidated the style code and replaced the style elements with the class element. These classes are defined in the style element in our main BloX . The code in our editor is now much more readable and easy to understand. Main style attribute In our BloX main style attribute, we’ve defined several classes. Let's examine the ‘blox-row-odd-key’ class. We see ‘.blox-row-odd-key{css code} in this style attribute with this class referenced in two TextBlocks. We moved the style elements from the previous step within this class definition. This makes the code more readable and manageable. Now, if we want to change the background color for these TextBlocks, we only need to change it once. The downside to defining our classes in the BloX main style element is that the code is limited to one line and difficult to read itself. Using external stylesheets, we can maintain readability for our class definitions. Step 4 - Other Useful BloX elements The following BloX elements are useful and some are sparsely documented. The Step 4 widget in the .dash file has placeholders for all of these in the BloX main section. Changing the values of these will give a good sense of how they affect the widget. showCarousel Setting this element to ‘true’ limits the widget to only show one value of the Items Setting this element to ‘false’ shows multiple values from the Items carouselAnimation With the showCarousel element set to ‘true’, the ‘showButtons’ and ‘delay’ element become applicable Setting ‘showButtons’ element to false hides the carousel buttons Setting ‘delay’ element to an integer cycles through the items. The integer is the number of milliseconds between each cycle i.e. delay = 1000 cycles through the items once per second titleStyle Setting ‘diplay’ element of ‘titlestyle’ to ‘none’ hides the title header row of the BloX widget The ‘fontColor’ element allows changing the text color of the title The ‘backgroundColor’ element allows changing the background color of the title header row The ‘backgroundImage’ element allows changing the background of the title header row to an image with a url disableLazyLoading By default, a limited number of items (10) are loaded when the widget is rendered With showCarousel set to false, setting this element to true loads all values when the widget is rendered. This is most useful to show more than 10 columns Warning: Disabling lazy loading can have performance impacts on the dashboard Hopefully, you feel comfortable enough to jump in and start creating your own custom visualizations. This walkthrough gives users a taste of how styling with CSS can help you create your own BloX widgets and touched on some important BloX elements to be aware of. The only way to get better at something is to practice, so I encourage you to challenge yourself and create your own widget.Add SQL Charts from Notebooks to a Dashboard
Sisense is happy to announce added functionality that allows users to add SQL charts to a Dashboard directly from Notebooks. This update significantly reduces the steps required to share insights and eliminates task switching between Notebooks, Dashboards, and Models while maintaining data security and data continuity.Advanced Scripting for Sisense’s Simply Ask NLQ: Adding Currency Symbols to Pivot Tables
Sisense’s Simply Ask feature empowers users to create visualizations instantly by asking natural language questions, simplifying data exploration without needing technical expertise or manual widget configuration. This Natural Language Query (NLQ) capability accelerates insights generation without the need to manually create new Sisense widgets through the standard UI for each question or data relationship of interest. In a previously published article , it was discussed how to customize Simply Ask NLQ-generated widgets using scripting, providing multiple examples of basic modifications and more detail on the basic mechanics of scripting Simply Ask widgets. In this article a more complex example wil be shared to show how widgets can be customized in more complex conditional ways: programmatically adding currency symbols to specific data columns in pivot table widgets generated by Simply Ask.Plugin - customLogoLink
Plugin - Set Custom Link Overriding default In Top Left Logo Icon Description This plugin allows changing the link of the top-left Sisense or white-labeled logo on the server's home page to a custom URL. Disabling the plugin will restore the logo link to its default behavior. Installation To install this plugin, download and unzip the attachment. Then drop the disableLogoLink folder into your plugins folder (/opt/sisense/storage/plugins). Enable the plugin on the Add-ons tab in the Admin section, wait for the plugin to build, and the plugin will be enabled. The plugin API and file management UI can also be used. Config Options - URL - URL navigated to on logo click - iframeLogoLinkChangeParentAddress - Boolean option allows logo click to change the parent address of a Sisense Iframe. It should be noted that JTD uses an iframe Notes This plugin is similar to the DisableLogoLink plugin which is documented here this page includes notes on creating plugins similar to this one. Learn more: https://docs.sisense.com/main/SisenseLinux/pre-post-build-plugins.htm https://academy.sisense.com/master-class-advanced-dashboards-with-plug-ins-and-scripts
