To GoodData homepage

Topics started by Jiri Zajic

18 Topics

Jiri Zajic
Jiri ZajicInspiring
published in GoodData.UI - KB articles

How to test Web Components

Web Components are a great way to embed the GoodData dashboards into your application. They are much easier to set up compared to the GoodData.UI React SDK and its <Dashboard /> component, and they beat iframes in performance and flexibility.This article aims to describe the most simple integration of the <gd-dashboard /> Web Component into plain HTML served via HTTPS. This is only meant as a how-to and may not comply with the best security practices for production deployment.Authentication tokens are hardcoded in the code below. Do not do this in production!index.htmlFirst, create a new blank file index.html that looks like this:<!DOCTYPE html><html lang="en"> <head> <script type="module" src="https://jirizajic.demo.cloud.gooddata.com/components/ecommerce-parent.js?auth=sso"> </script> </head> <body> <h1>heading</h1> <gd-dashboard dashboard="092929af-375a-4e9c-964f-2add8cdbd259"></gd-da

1221
W
22 days ago
Jiri Zajic
Jiri ZajicInspiring
published in GoodData.UI - KB articles

Raw Executions on GoodData Cloud

Example usage of tigerFactory() executionsWhen you create a new frontend application using npx @gooddata/create-gooddata-react-app@latest my-app, the CLI walks you through some configuration steps where you fill in your hostname and pick a desired JavaScript flavor. The boilerplate then contains all necessary logic so that you can authenticate and start building your custom frontend application on top of the GoodData platform. But what if you don’t want to use the @gooddata/create-gooddata-react-app CLI, maybe you don’t even want to use React.This article describes how to instantiate the GoodData backend in a framework agnostic environment. To get a head start on webpack configuration you can use popular webpack Boilerplate by Tania Rascia:git clone git@github.com:taniarascia/webpack-boilerplate.gitcd webpack-boilerplatenpm inpm startAfter running the above command you should see the homepage of the webpack boilerplate that should look something like this:First, let’s add some GoodData

860
Jiri Zajic
1 year ago
Jiri Zajic
Jiri ZajicInspiring
published in Administration - KB articles

White-Labeling vs Theming

The GoodData platform offers various branding configurations. This article aims to introduce the differences between branding, white-labeling, and theming.ThemingThemes customize the look of Dashboards and Analytical Designer: Fonts, colors, background colors, border radius, etc. Themes are JSON structures with CSS properties to customize the visual elements, such as buttons, headings, dashboard content, and navigation.https://www.gooddata.com/developers/cloud-native/doc/cloud/manage-deployment/customize-appearance/create-custom-themes/Color PaletteColor palette can be considered part of Theming. It defines colors to be used in data visualizations. For example, when you create a new stacked column chart in Analytical Designer, the colors used to render the colorful columns come from this color palette.https://www.gooddata.com/developers/cloud-native/doc/cloud/manage-deployment/customize-appearance/create-custom-color-palettes/White-LabelingWhite-labeling is an ability to hide or replac

790
Jiri Zajic
1 year ago
Jiri Zajic
Jiri ZajicInspiring
published in GoodData.UI - KB articles

Dimensions in Custom Executions

Example usage of useExecutionDataView() hookWhen working with GoodData.UI, the most common way to render a chart on a page looks something like this:import { ColumnChart } from "@gooddata/sdk-ui-charts";import * as Md from "../md/full";const metric = Md.AveragePriceOfProducts;const viewBy = Md.ProductBrand;const stackBy = Md.ProductCategory;const filters = [];<div style={{ height: 400 }}> <ColumnChart measures={[metric]} viewBy={viewBy} stackBy={stackBy} filters={filters} /></div>The <ColumnChart /> component knows you want to slice the measure by two attributes. Under the hood it builds a corresponding request that once executed returns results where each row is one category, and each number within the row is an average price of products by brand.// B1, B2, B3, B4, B5 Brands[ 123, 123, 123, null, 123] // Category C1[ 456, 456, null, 456, 456] // Category C2[ null, null, 789, 789, 789] // Category C3If you only w

730
Jiri Zajic
1 year ago
Jiri Zajic
Jiri ZajicInspiring
published in GoodData.UI - KB articles

GoodData.UI: Custom Visualizations

GoodData.UI is a powerful JavaScript/React SDK that lets you build fully custom analytics applications on top of the GoodData platform, including fully custom visualizations. There are two ways how to approach the implementation: A higher-level approach using a React component <Execute />, and a lower-level end-to-end approach using a raw JavaScript Promise.<Execute /> ComponentBuilding custom visualizations by utilizing the <Execute /> component is very straightforward and should be fairly familiar even to a beginner React developer. The <Execute /> component offers a straightforward interface for handling loading and error states and ensures its results are always up to date by preventing issues related to asynchronous race conditions.For more, see How to Create a Custom Visualization docs, the Execute examples, and this interactive example.End-to-End FlowSometimes using the React component <Execute /> is not the most convenient way, and you are better o

3442
Jiri Zajic
1 year ago
Jiri Zajic
Jiri ZajicInspiring
published in SDKs and APIs - KB articles

GoodData.UI in non-React environmentTutorial

IntroductionQuestion: Is it possible to use GoodData.UI in an environment other than React?Short answer: Yes!Long answer: Keep reading 👇React componentsReact is not your typical MVC (Model, View, Controller) framework. React is only concerned with state management and rendering that state to DOM, so it's basically just the V part (View) from the MVC family. That said, React shouldn't clash with any other frontend frameworks (Angular, Vue, Backbone, …).To make the React components from GoodData.UI work in a non-React environment, some sort of wrapper is needed. For example, such wrapper for Angular is described in GoodData.UI documentation at https://sdk.gooddata.com/gooddata-ui/docs/ht_use_react_component_in_angular_2.x.html.For more advanced use-cases that rely on React Hooks a developer needs to Access the state of the Dashboard component from outside the component.Note: Applying custom styles using the <​​ThemeProvider /> component is currently not possible outside the React

1680
Jiri Zajic
1 year ago
Jiri Zajic
Jiri ZajicInspiring
published in GoodData.UI - KB articles

GoodData.UI: ThemeProvider

When it comes to company design, color-coding, and branding, the GoodData platform comes with several means of styling to help achieve the desired result. In this article, we’ll walk through different approaches to customize the looks of your analytics, and we’ll focus mainly on the <ThemeProvider /> component that’s part of the GoodData.UI library.Out of the BoxBefore we deep dive into GoodData.UI’s styling capabilities, you should know that responsive Dashboards and the data exploration app Analytical Designer — tools available out of the box — already provide you with basic customizations. You can turn on and off the x-axis and y-axis, hide the legend, and modify the series’s colors for each individual insight. This is very quick and easy to do and proves to be quite handy and sufficient for most cases.If you need to change individual colors within every insight, the next logical step is to import a custom color palette to replace the one provided by default. This can be done

1570
Jiri Zajic
2 years ago
Jiri Zajic
Jiri ZajicInspiring
published in GoodData.UI - KB articles

GoodData.UI: SAML SSO Example

This article will guide you through a SAML SSO authentication example within a GoodData.UI application. We will use GoodData’s Accelerator Toolkit along with the Auth0 authentication service.This is a simple, happy-path example to get you a general idea of how SSO works and how it can be implemented. There are many 3rd party SAML authentication services available and an infinite number of different use-cases. If you are unsure or get stuck, ask here in the Gooddata Community, or reach out to our support@gooddata.com.If you already have an SSO working on your domain and can log in using the “Use organization login” button, you can skip forward to the GoodData.UI chapter to see the React/JavaScript implementation.Before We Begin​​Single sign-on (SSO) is an authentication method that enables users to securely authenticate with multiple applications and websites by using just one set of credentials.GoodData supports two types of SSO authentication: a proprietary authentication mechanism ba

6870
Jiri Zajic
2 years ago
Jiri Zajic
Jiri ZajicInspiring
published in GoodData.UI

GoodData Platform: HTTPS vs HTTP

When working with the GoodData platform, most of the time you are required to use HTTPS. However, there is one scenario when you are good with just HTTP. Here’s a brief summary to know what’s best for what use case.GoodData is a secure platform; therefore, HTTPS is always enforced for production when working with the hosted GoodData Platform and is strongly recommended for the custom deployment of GoodData.CN.For development with GoodData.UI against the hosted GoodData Platform, applications created with create-gooddata-react-app tool run on HTTPS by default. (Unless --backend tiger option is supplied.)There’s only one exception where HTTP is acceptable: When developing against locally hosted GoodData.CN. This is because the AIO (All-In-One) Docker image containing the GoodData.CN CE may need to communicate with your GoodData.UI application and setting up HTTPS for communication within a single localhost machine would be a tedious developer’s experience.  Production Development  

420
Jiri Zajic
2 years ago
Jiri Zajic
Jiri ZajicInspiring
published in GoodData.UI - KB articles

Implementing Multitenancy with GoodData.UI

Maybe you’ve built your perfect analytics application already, and perhaps you only just finished a minimum viable product or a proof of concept. One way or another, sooner or later, you will want to make sure it works well against multiple workspaces.PrerequisitesWhen developing custom solutions with GoodData.UI, you typically work against a single “master” workspace. In production though, you'll most commonly have a separate workspace for each of your customers/tenants. That means that you'll need to implement a mechanism that will execute the GoodData.UI frontend against the correct workspace for each authenticated user. As long as you use standard GoodData multi-tenancy tooling (LCM, workspace hierarchy, etc.) to create the individual workspaces for your tenants, you already comply with the following:All the workspaces share the same logical data model (LDM). All the workspaces share the same metadata objects referenced in the custom application (measures, attributes, insights, das

2650
Jiri Zajic
2 years ago
Jiri Zajic
Jiri ZajicInspiring
published in SDKs and APIs - KB articles

How to Get Metadata Object Identifiers in GoodData.CN

When working with the GoodData.CN, you might need to look up an identifier for a specific metadata object. This could be when manipulating objects via APIs or building a custom app using GoodData.UI.The following applies to GoodData.CN and is demonstrated against an all-in-one (AIO) image of the Community Edition. If you’re working with the hosted GoodData Platform, please refer to this article instead.Let’s create an insight in Analytical Designer and use it as an example:As soon as we save any insight, the browser’s address bar updates the URL with the insight’s identifier. You can also open existing insights using the “Open” to find their IDs.An alternative to opening an insight in the Analytical Designer to find the identifier would be to go to http://localhost:3000/api/entities/workspaces/<workspace_id>/visualizationObjects in your browser. From here, you can pick any insight and click on its “self” link to see its full metadata definition, including its object identifier.Si

800
Jiri Zajic
2 years ago
Jiri Zajic
Jiri ZajicInspiring
published in SDKs and APIs - KB articles

How to Get Metadata Object Identifiers in GoodData Platform

When working with the GoodData platform, you might need to look up an identifier of a specific metadata object. This could be when working with LCM, manipulating objects via API, or building a custom app with GoodData.UI.The following applies to the hosted GoodData Platform. If you’re working with GoodData.CN, please refer to this article instead.Identifiers vs. IDs vs. URIsThere are two kinds of identifiers used for metadata in the hosted GoodData Platform – object ID and identifier.Object ID is a simple integer. Every time a new metadata object is created, it gets a number assigned that is the last number used plus 1; you can think of object ID as an auto-incrementing primary key in a database. Object ID is then used to compose an object URI which has a form of: /gdc/md/<workspace_id>/obj/<object_id>. Identifier is a unique hash assigned to each metadata object. Whenever working with a workspace via APIs – be it directly or using some SDK or a brick – it’s always better t

3740
Jiri Zajic
2 years ago
Jiri Zajic
Jiri ZajicInspiring
published in GoodData.UI - KB articles

GoodData.UI Typings & Type Guards

When trying to implement drilling with one of our GoodData.UI visualization components, your compiler or IDE might give you a warning or an error similar to this one:Property 'attributeHeaderItem' does not exist on type 'DrillEventIntersectionElementHeader'.  Property 'attributeHeaderItem' does not exist on type 'IAttributeDescriptor'.ts(2339)What does it mean? And how to fix this? If you're interested, keep reading…In short, this is a TypeScript warning, and it may pop up even when your project is not in TypeScript and your files have .js extension, as some IDEs read the Typings of dependencies regardless.TypeScript is a programming language that adds strong typing (that you may know from Python, Ruby, or Java) to otherwise untyped (or loosely typed) JavaScript. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for the development of large applications and transcompiles to JavaScript. As TypeScript is a superset o

610
Jiri Zajic
2 years ago
Jiri Zajic
Jiri ZajicInspiring
published in SDKs and APIs - KB articles

Embedding via iFrame vs GD.UI DashboardView

Here are the basic pros and cons of embedding Dashboards using an iframe opposed to integrating Dashboards using GoodData.UI <DashboardView /> component.iframeEasy to set up See the screenshot below for how to get the right URL Standard HTML No additional frameworks, tooling or skill required Generally low performance Especially the initial load can be slow Cumbersome interactivity Communication between the iframe and its parent application is done via window.postMessage() method that by design comes with some pitfalls May not comply with your security requirements When an iframe is hosted on a site that contains an XSS vulnerability, it can be used to exploit it Read more about Why are iframes considered a security risk? and Are iframes bad practice? GD.UI <DashboardView /> ComponentRequires frontend developer knowledge to set up Basic React understanding is needed Great performance No different from the speed of the application where it’s integrated Seamless intera

6012
Z
GoodData Employee
2 years ago
Jiri Zajic
Jiri ZajicInspiring
published in GoodData.UI - KB articles

InsightView Component with GoodData.CN

If you are interested in GoodData.CN, please contact us.Alternatively, test a trial version of GoodData Cloud:Start Your GoodData Analytics Trial — Commitment-Free IntroductionGoodData.CN enables you to run GoodData Analytics in a private and public cloud and on premise. With the GoodData.CN release, the GoodData.UI JavaScript SDK has been updated to be compatible with both the hosted GoodData Platform and GoodData.CN. This article describes how to:Install GoodData.CN Community Edition locally on your computer Use Accelerator Toolkit to create a GoodData.UI application from scratch Connect the GoodData.UI application to the GoodData.CN instance on your localhost Render your first insight against GoodData.CN using GD.UIPrerequisitesThis tutorial assumes a basic knowledge of frontend development. You should have installed and be familiar with Docker, npm, yarn, and you should be comfortable using a command line.Installing GoodData.CNTo install GoodData.CN on your machine, navigate to htt

1730
Jiri Zajic
3 years ago
Jiri Zajic
Jiri ZajicInspiring
published in SDKs and APIs - KB articles

Integrating Dashboards into your Application

IntroductionThis article will review how to integrate — not embed — GoodData analytics into your application using JavaScript. For embedding, we generally use iframes and you can read about it here. While direct integration may take a few more steps to set up, it comes with more than a few benefits: Faster initial load, easy communication between the embedded integrated component and the rest of the application, no CORS or 3rd party cookies issues, and no additional authentication or SSO setup.WARNING: The DashboardView component has been superseded by the newer Dashboard component. The DashboardView component has been deprecated. The newer Dashboard component does not accept filters property and works with store accessors instead.What’s the story?Let’s assume there’s an application with a particular look & feel that your users are accustomed to. It contains some basic charts and works fine, but any time your PMs or customers request a change, you need developers to change the code

3100
Jiri Zajic
3 years ago
Jiri Zajic
Jiri ZajicInspiring
published in Dashboards and Reports - KB articles

The GoodData KendoReact IntegrationTutorial

KendoReact is a professional UI kit on a mission to help you build business apps with React much faster. It provides 90+ customizable React components that are easy to integrate with your design language. In this article, we’ll take a look at how to connect KendoReact to GoodData’s powerful analytics platform.Getting StartedWe’ll start with KendoReact’s Sales Dashboard application. To get it up and running, we need to:# clone repositorygit clone git@github.com:telerik/kendo-react-sales-dashboard.git# install dependenciescd kendo-react-sales-dashboardyarn install# serve over HTTPS with hot reload at https://localhost:3000HTTPS=true yarn startThe application should now be running at https://localhost:3000. The GoodData platform is only accessible via secured HTTPS, so make sure to include HTTPS=true as part of the yarn start command on Mac, or HTTPS=true&&yarn start if you’re on Windows.At this point, this is all KendoReact’s Sales Dashboard with hard-coded dummy data. To add som

5050
Jiri Zajic
3 years ago
Jiri Zajic
Jiri ZajicInspiring
published in SDKs and APIs - KB articles

Embedding Dashboards into your ApplicationTutorial

IntroductionThis article will review how to embed GoodData analytics into your application via iframes. In HTML, an iframe provides for a frame to be placed inside the body of a document. It lets you build user experiences into embeddable ‘cross-domain components’, which let users interact with other sites without being redirected. While iframes may have some disadvantages (such as slower initial load), they often serve as the easiest and fastest way to achieve the desired result with minimal coding.What’s the story?Let’s assume there’s an application with a particular look & feel that your users are accustomed to. It contains some basic charts and works fine, but any time your PMs or customers request a change, you need developers to change the code, which often takes quite a lot of time and effort. What you need is a simple to use GUI that will allow anybody – even your customers – to make the changes easily.The aim of this exercise is to replace the hardcoded table and the two c

10390
Jiri Zajic
3 years ago
Welcome to the GoodData Community!Cookie settings