https://docs-production-katalon.netlify.app/assets/js/850465d5.b6b19976.js

1"use strict";(self.webpackChunkKatalon_Docs=self.webpackChunkKatalon_Docs||[]).push([[3208],{28453:(e,t,s)=>{s.d(t,{R:()=>a,x:()=>o});var n=s(96540);const r={},i=n.createContext(r);function a(e){const t=n.useContext(i);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),n.createElement(i.Provider,{value:t},e.children)}},73200:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>h,frontMatter:()=>a,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"analyze/create-custom-widgets","title":"Custom Widgets","description":"This document explains how to create custom widgets in Katalon True Platform analytics.","source":"@site/docs/katalon-platform/analyze/create-custom-widgets.md","sourceDirName":"analyze","slug":"/analyze/create-custom-widgets","permalink":"/katalon-platform/analyze/create-custom-widgets","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedAt":1776925751000,"frontMatter":{"title":"Custom Widgets"},"sidebar":"katalon-platform","previous":{"title":"Custom Dashboards","permalink":"/katalon-platform/analyze/create-custom-dashboards"},"next":{"title":"Release Health Dashboard","permalink":"/katalon-platform/analyze/about-the-release-quality-dashboard"}}');var r=s(74848),i=s(28453);const a={title:"Custom Widgets"},o=void 0,l={},d=[{value:"Steps to create custom widgets",id:"steps-to-create-custom-widgets",level:2},{value:"Example custom widgets",id:"example-custom-widgets",level:2},{value:"Custom widget templates",id:"custom-widget-templates",level:2}];function c(e){const t={a:"a",admonition:"admonition",h2:"h2",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.p,{children:"This document explains how to create custom widgets in Katalon True Platform analytics."}),"\n",(0,r.jsx)(t.admonition,{title:"requirement",type:"info",children:(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"You must have either the Project Admin or Test Lead role to create custom widgets. Created widgets can then be viewed by those with access to the project."}),"\n",(0,r.jsxs)(t.li,{children:["Custom widgets can be edited by different users, with the ",(0,r.jsx)(t.strong,{children:"Project Admin"})," or ",(0,r.jsx)(t.strong,{children:"Test Lead role"}),"."]}),"\n"]})}),"\n",(0,r.jsx)(t.p,{children:"You can create your own custom widgets to address specific data needs for your projects:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Track custom KPIs"}),"\n",(0,r.jsx)(t.li,{children:"Analyze specific data subsets"}),"\n",(0,r.jsx)(t.li,{children:"Visualize trends unique to your workflows"}),"\n"]}),"\n",(0,r.jsx)(t.admonition,{type:"note",children:(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Custom charts are project-scoped and currently support the ",(0,r.jsx)(t.strong,{children:"Test Execution Results"})," dataset only. Additional datasets and chart types will be supported in future releases."]}),"\n"]})}),"\n",(0,r.jsx)("img",{src:"https://tw-cdn.katalon.com/katalon-platform/Analyze/customizing/analytics-trends-custom-widget-1.png",alt:"analytics trends custom widget",width:"500px"}),"\n",(0,r.jsx)(t.h2,{id:"steps-to-create-custom-widgets",children:"Steps to create custom widgets"}),"\n",(0,r.jsx)(t.p,{children:"Check out our interactive guide, to create a widget that tracks execution status for the past 30 days:"}),"\n",(0,r.jsx)("iframe",{src:"https://demo.arcade.software/1QWYuY1BoRd99C4Tolwj?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true",title:"Create and Use a Custom Widget",frameborder:"0",loading:"lazy",webkitallowfullscreen:!0,mozallowfullscreen:!0,allowfullscreen:"true",allow:"clipboard-write",style:{width:"100%",height:"400px",border:"none"}}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"You can access custom widgets in either:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.strong,{children:"Analytics > Analytics & Trends Dashboard"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.strong,{children:"Analytics > Dashboards > Create Dashboard"})}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Once you're in either dashboard, click ",(0,r.jsx)(t.strong,{children:"Create Custom Widget"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"Use the chart builder to choose chart types and configure metrics. For this widget, configurations are:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Dataset"}),": Execution Test Results"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Chart type"}),": Bar"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Show results by"}),": Execution DateTime"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Break down by"}),": Day"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"What to measure"}),": COUNT (Test Run Id)"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Group by"}),": Execution Status"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Filters"}),": Execution DateTime > Past 30 Days"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Advanced > X Axis > Time format"}),": %d/%m/%Y"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.p,{children:"Preview your chart live before saving."}),"\n",(0,r.jsx)(t.admonition,{type:"tip",children:(0,r.jsxs)(t.p,{children:["Choose a ",(0,r.jsx)(t.a,{href:"#custom-widget-templates",children:"custom widget template"})," to make widgets quicker."]})}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["Save your custom widget to the ",(0,r.jsx)(t.strong,{children:"Widget Library"})," under the ",(0,r.jsx)(t.strong,{children:"Custom"})," category. The library will be auto-filtered by the created widget's name - if you want to see other widgets, remove text in the widget search bar."]}),"\n"]}),"\n",(0,r.jsx)("img",{src:"https://tw-cdn.katalon.com/katalon-platform/Analyze/customizing/testops-widget-library-remove-text-from-search-bar.png",alt:"testops widget library remove text from search bar",width:"500px"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsxs)(t.ol,{start:"5",children:["\n",(0,r.jsx)(t.li,{children:"Once saved, drag and drop the chart into your dashboard. Once added to the dashboard, the widget auto-adjusts to the dashboard\u2019s selected time scope and interval."}),"\n"]}),"\n",(0,r.jsx)(t.admonition,{type:"note",children:(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["When widgets are added to a dashboard, the dashboard's filters override the widget's. Learn more about custom dashboards and filters at ",(0,r.jsx)(t.a,{href:"/katalon-platform/analyze/create-custom-dashboards",children:"Create & Manage Dashboards"}),"."]}),"\n"]})}),"\n",(0,r.jsx)(t.h2,{id:"example-custom-widgets",children:"Example custom widgets"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Team Performance Dashboard"}),": Bar chart showing each member's execution ",(0,r.jsx)(t.strong,{children:"count"})," and ",(0,r.jsx)(t.strong,{children:"average pass rate"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Sprint Velocity Tracking"}),": Line chart displaying ",(0,r.jsx)(t.strong,{children:"daily test runs"}),", filtered to your current sprint."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Cross-Browser Coverage"}),": Pie chart showing ",(0,r.jsx)(t.strong,{children:"test case distribution"})," across browsers and OS combinations."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Detailed Execution List"}),": Table with raw data, showing ",(0,r.jsx)(t.strong,{children:"test case name"}),", ",(0,r.jsx)(t.strong,{children:"status"}),", ",(0,r.jsx)(t.strong,{children:"executor"}),", ",(0,r.jsx)(t.strong,{children:"duration"}),", and ",(0,r.jsx)(t.strong,{children:"datetime"}),", filtered by recent runs."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Test Suite Summary"}),": Table with aggregated data, displaying ",(0,r.jsx)(t.strong,{children:"execution counts"}),", ",(0,r.jsx)(t.strong,{children:"pass rates"}),", and ",(0,r.jsx)(t.strong,{children:"average duration"}),", filtered by test suite."]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"custom-widget-templates",children:"Custom widget templates"}),"\n",(0,r.jsx)(t.p,{children:"Custom templates are a helpful starting point for exploration and brainstorming while creating widgets."}),"\n",(0,r.jsxs)(t.p,{children:["You can build a widget from scratch, or select ",(0,r.jsx)(t.strong,{children:"Use Template"})," to choose from our sample widget templates:"]}),"\n",(0,r.jsx)("img",{src:"https://tw-cdn.katalon.com/katalon-platform/Analyze/customizing/testops-custom-widget-template-1.png",alt:"testops custom widget template",width:"700"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["Click ",(0,r.jsx)(t.strong,{children:"Use Template"}),". A library pops open with pre-set templates."]}),"\n",(0,r.jsx)(t.li,{children:"Select a template."}),"\n",(0,r.jsxs)(t.li,{children:["Click ",(0,r.jsx)(t.strong,{children:"Use Template"}),". Pre-configured fields will be applied for the template. You\u2019ll then see a preview just like manual creating, for adju

1stments."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}}}]);