Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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: 
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
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>
Link to chart type page https://qlik.dev/embed/foundational-knowledge/visualizations/
Check out, parameter and UI settings:
The Video
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.
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.
