STEP by STEP: Create a Simple Qlik Sense Extension

 

Step-by-Step Guide: Create a Simple Qlik Sense Extension

---

✅ Prerequisites

• Qlik Sense Enterprise or Qlik Sense Desktop

• Access to Qlik Dev Hub (/dev-hub)

• Basic knowledge of HTML, JavaScript, CSS

• Optional: Access to a Qlik Sense server for deployment

---

🔹 Step 1: Open Dev Hub

1. Open a browser and go to:

   bash
   
   http://localhost:4848/dev-hub (Qlik Sense Desktop)
   https://<your-server>/dev-hub (Enterprise)
   

2. Click “Extension Editor”

---

🔹 Step 2: Create a New Extension

1. Click Create New

2. Provide a:

   • Name: e.g., SimpleBarChart

   • Description (optional)

   • Select or create a library folder

3. Click Create

Qlik generates a boilerplate extension with:

• Definition.js (main config)

• Script.js (controller/logic)

• Template.html

• Style.css

---

🔹 Step 3: Define the Extension (JavaScript)

In the Definition.js, define how your extension behaves:

javascript

define([
  'jquery',
  'qlik',
  'text!./template.html',
  'css!./style.css'
], function ($, qlik, template) {

  return {
    definition: {
      type: "items",
      component: "accordion",
      items: {
        settings: {
          uses: "settings",
          items: {
            title: {
              ref: "props.title",
              label: "Title",
              type: "string",
              defaultValue: "My Extension Title"
            }
          }
        }
      }
    },

    paint: function ($element, layout) {
      let html = template.replace("{{title}}", layout.props.title);
      $element.html(html);
      return qlik.Promise.resolve();
    }
  };

});

---

🔹 Step 4: Create HTML Template

In template.html, add:

html

<div class="simple-extension">
  <h2>{{title}}</h2>
  <div>Welcome to your first Qlik Sense extension!</div>
</div>

---

🔹 Step 5: Add CSS Styling (Optional)

In style.css:

css

.simple-extension {
  background: #eef5fb;
  padding: 10px;
  border-radius: 5px;
  font-family: Arial, sans-serif;
}
.simple-extension h2 {
  color: #007acc;
}

---

🔹 Step 6: Save and Use the Extension

1. Click Save in Dev Hub

2. Open a Qlik Sense app

3. Go to a sheet → Custom Objects → Extensions

4. Drag your extension onto the sheet

5. Configure the title in the right-hand panel

---

🔄 Optional: Add Dimension & Measure Support

In definition block:

javascript

definition: {
  type: "items",
  component: "accordion",
  items: {
    dimensions: {
      uses: "dimensions",
      min: 1,
      max: 1
    },
    measures: {
      uses: "measures",
      min: 1,
      max: 1
    },
    settings: {
      uses: "settings"
    }
  }
}

Access them in paint like:

javascript

var dimension = layout.qHyperCube.qDataPages[0].qMatrix[0][0].qText;
var measure = layout.qHyperCube.qDataPages[0].qMatrix[0][1].qNum;

---

📦 Step 7: Export for Deployment (Enterprise)

1. Locate the folder in:

   php-template
   
   C:\Users\<user>\Documents\Qlik\Sense\Extensions\<YourExtensionName>
   

2. Zip the folder

3. Upload it to QMC → Extensions → Import