Qlik Anonymous Access, for PUBLIC - Tested and Working

parkera — Tue, 19 Nov 2024 11:35:18 GMT

Qlik Anonymous Access

Qlik Anonymous Access - PUBLIC

Qlik Recently introduced Qlik Anonymous Access service for public use cases, and this has been met with excitement. We can again deliver solutions to customers that want to create public facing solutions embedding objects (Apps/Sheets/Charts) from Qlik Cloud analytics directly into a website, with the ability to adopt themes.

To deliver a solution is not difficult, but does have many moving parts. The result is seamless and works well.

Note: As this is a PUBLIC service, you will get a tenant that is based in Sweden (as of Nov 24)

Qlik Anonymous Access, for PUBLIC - Tested and Working

See example: Qlik Anonymous Access - Demo

By using this method organisations can publish data that is suitable for public consumption. (See: qlik governed data framework - PUBLIC

Use Cases:

With anonymous access, you can allow people outside of the Qlik Cloud tenant to access Qlik Sense app content. You can share apps as links that can be opened by anyone, or you can use Qlik-embed to embed app content directly into other web pages and applications. Anonymous access is controlled at the app level.

Sources:

A special tenant that allows for anonymous access from Qlik

Example Webpage is: https://www.differentia.consulting/qlik/qlik-anonymous-access-demo/

Components needed:

Donor App in a a Managed Space, shared with embed code (see notes on how to get this):

Example Embed code: 857e8d1c-87xx-4342-97x2-ae5fx157124c.zw4Z-6b80KXziYAXXHVUWyVjiNJXxXJ0_GAWyfl9EGw

Your App ID: 2b110c64-f03d-4d6f-9bf1-c2d1ec7b8f0c - grab from its URL when opened

Web embed config:

https://qlik.dev/embed/qlik-embed/quickstart/qlik-embed-anonymous-tutorial/

https://qlik.dev/embed/foundational-knowledge/visualizations/

https://qlik.dev/examples/qlik-embed-examples/analytics-field-example/

https://qlik.dev/examples/qlik-embed-examples/analytics-sheet-example/

https://qlik.dev/embed/qlik-embed/parameters/

Steps to create:

0 Get anonymous tenant

1 Create app

2 Move App to a "Public" Managed space (Must be managed)

3 Change App status to shared to obtain 32 chr embed code -

4 Create OAuth credentials to get key - (Admin)

5 Create webpage and add following to Header Script:

crossorigin="anonymous"
type="application/javascript"
src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components@1/dist/index.min.js"
data-host="https://yourdomain.se.qlikcloud.com/" //DC tenant//
data-client-id="a934a6b54xxx0b300a209836c3c50b5d" 
data-access-code="c2x7b787-14e8-43e8-b9x9-8420187ef43a.alVXxPrVK9Jt9zXiCxmJmBHxxx6DRAvfJItM_dDjeBQ"
data-auth-type="anonymous"

You will also need styles (else application is compressed, ie height is restricted to default row height) example:

<meta charset="UTF-8"> <!-- Defines the character encoding for the document (per your region) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Sets the viewport width and initial scale (essential for responsive design) -->
<style>
.analyticsbar { <!-- Defines a CSS class for the analytics bar object -->
width: 100%; <!-- Sets the width of the object (you could use a value) -->
height: 600px; <!-- Sets the height of the object (essential) -->
border: 1px solid #bbb; <!-- Sets the border style, color, and width -->
flex: 2 0 auto; <!-- Defines the flexibility of the object -->
border-radius: 3px; <!-- Rounds the corners of the object -->
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); <!-- Adds a shadow effect to the object -->
position: relative; <!-- Sets the positioning context of the object -->
box-sizing: border-box; <!-- Defines how the box model is calculated -->
overflow: auto; <!-- Enables scrolling if the content overflows the object -->
}
</style>

Example with Theme

<qlik-embed
        ui="analytics/sheet"
        app-id="<APP_ID_FROM_QLIK_ANALYTICS>"
        theme="<NAME_OF_THEME>"
        object-id="<SHEET_ID_FROM_APP>"
        context:json="{theme:'<THEME_NAME>', language:'<LANGUAGE>' interactions:{select: false, edit: false}}"
      ></qlik-embed>

Addendum:

Mike T's code:

<style>
/*.chartlayout { width: 100%;
 display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); gap: 8px;}*/
 .chartlayout { width: 100%;  display: grid; grid-template-rows: auto auto; /* Two rows */ grid-template-columns: repeat(4, 1fr); /* First row has 4 equal columns */  gap: 8px;}
 .chartlayout div:nth-child(5) { grid-column: span 4; /* Make the 5th item (second row) span all columns */}  .layout { width: 100%;
 display: grid; grid: "header header header" auto "leftSide body rightSide" 1fr "footer footer footer" auto / auto 1fr auto; gap: 8px;}
.header { grid-area: header; }.leftSide { grid-area: leftSide; }.body { grid-area: body; }.rightSide { grid-area: rightSide; }.footer { grid-area: footer; }

 .analyticsbar { width: 935px; height: 600px; border: 1px solid #bbb; flex: 2 0 auto; border-radius: 3px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); position: relative; box-sizing: border-box; overflow: auto; }
 .analyticschart { width: 200px; height: 200px; border: 1px solid #bbb; // flex: 2 0 auto; border-radius: 3px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); position: relative; box-sizing: border-box; overflow: auto; }@media (max-width: 768px) { .chartlayout { grid-template-columns: 1fr; grid-template-rows: auto; }  .chartlayout > div { grid-column: 1; width: 100%; }  .analyticschart { width: 100%; height: 200px; } .analyticsbar { width: 100%; height: 600px; } .chartlayout div:nth-child(5) { grid-column: span 1; }}
  </style>

view-source:https://retrogameboyz.com/pages/test-stats-embedded - M T's anonymous page

Link to chart type page https://qlik.dev/embed/foundational-knowledge/visualizations/

Check out, parameter and UI settings:

https://qlik.dev/embed/qlik-embed/parameters/

The Video

https://youtu.be/b_jYhLChxwI

Another Qlik Anonymous Access Video: Detailed:

https://help.qlik.com/en-US/video/Jtz8bn-MxGM

Apologies if this is in a bit of a mess, but I am not a developer, and I got it to work. I hope that it helps someone.

topic Qlik Anonymous Access, for PUBLIC - Tested and Working in Integration, Extension & APIs

Qlik Anonymous Access, for PUBLIC - Tested and Working

Qlik Anonymous Access

Qlik Anonymous Access - PUBLIC

Qlik Anonymous Access, for PUBLIC - Tested and Working

By using this method organisations can publish data that is suitable for public consumption. (See: qlik governed data framework - PUBLIC Use Cases:

Sources:

Components needed:

Steps to create:

Addendum:

By using this method organisations can publish data that is suitable for public consumption. (See: qlik governed data framework - PUBLIC

Use Cases: