Monday, 19 May 2025

STEP by STEP: Create a Simple Widget in Qlik Sense

 

 Step-by-Step: Create Simple Widget in Qlik Sense


Prerequisites

  • Qlik Sense Enterprise (or Qlik Sense Desktop)

  • Access to the Qlik Sense Dev Hub

  • Basic knowledge of HTML, CSS, and JavaScript


🔹 Step 1: Open the Developer Hub

  1. Open a browser and go to:

    https://<your-qlik-sense-server>/dev-hub

    (Or use http://localhost:4848/dev-hub if using Qlik Sense Desktop)

  2. Click on "Widget Editor"


🔹 Step 2: Create a New Widget

  1. Click "Create New" on the top-right

  2. Enter:

    • Name: e.g., SimpleTextWidget

    • Description: Optional

    • Library: Choose an existing library or create a new one

  3. Click Create


🔹 Step 3: Define the Widget Template (HTML)

In the Template section, enter your basic HTML. For example:

Html
<div class="my-widget"> <h2>{{title}}</h2> <p>{{description}}</p> </div>

🔹 Step 4: Define Widget Properties (Fields)

Switch to the "Controller" tab and define properties users can configure in Qlik Sense. 

For example:

javascript

return { definition: { type: "items", component: "accordion", items: { settings: { uses: "settings", items: { title: { ref: "title", label: "Title", type: "string", defaultValue: "My Widget Title" }, description: { ref: "description", label: "Description", type: "string", defaultValue: "This is a simple Qlik Sense widget." } } } } }, paint: function ($element, layout) { // Optional: dynamic JS code return qlik.Promise.resolve(); } };

This allows the user to enter a title and description via the properties panel.


🔹 Step 5: Add Basic Styling (Optional)

Go to the "Style" section and add some CSS:

css

.my-widget { padding: 10px; background-color: #f5f5f5; border-radius: 5px; font-family: sans-serif; } .my-widget h2 { color: #007acc; }

🔹 Step 6: Save and Use in App

  1. Click Save.

  2. Go back to your Qlik Sense app.

  3. Open a sheet and add a new object.

  4. Find your widget under "Custom Objects" > "Widgets".

  5. Drag it onto the canvas and configure the properties.


No comments:

Post a Comment

STEP by STEP : Qlik Sense Server Migration by Cloning with Hostname Change

STEP by STEP : Qlik Sense Server Migration by Cloning  with Hostname Change Step 1: Prepare and Backup the Source Server 1.1 Stop All Qlik ...