- 22 Apr 2024
- 3 Minutes to read
- Print
- PDF
Coded Widget
- Updated on 22 Apr 2024
- 3 Minutes to read
- Print
- PDF
Coded widget lets you create any widget functionality using HTML, CSS, and Client Script and design custom widgets.
User persona: Application Designer
Use Case User persona: Administrator | Solution |
A Service Management company has a service portal for an IT department, where employees can submit service requests, such as requesting a new laptop, reporting a software issue, or asking for technical assistance. The portal allows users to submit and track their service requests. However, the standard portal doesn't provide a real-time status update for service requests. Sandra, the Administrator wants a custom widget that displays the real-time status of service requests. This widget should be placed on the portal's homepage as dedicated "Service Request Status" widget. | Sam can enable Coded widget that leverages the power of code by which users can create useful and innovative widgets to meet their needs. He can use:
With this custom coded widget, users of your service portal can easily check the status of their service requests without having to contact the IT department. |
Configure Coded widget
This section contains the list of steps using which Application Designer can add the widget in the Service Portal screen.
- Navigate to Design Portal > Widgets > Add Widget.
Figure: Adding Widgets
- Customize the Service Portal by dragging the widget from the widget list screen.
Figure: Coded widget - Click icon to view Properties pop-up.
Figure: Modify the properties
You can view the following tabs on the Settings for this field:
- Properties
- Appearance
- Code
Properties
This section contains the list of properties using which the Application Designer can configure the respective widget feature. To know more about the fields that are available under the Properties section, see the Field Description given below.
Figure: Properties tab
Field Description
Properties | |
---|---|
Widget Type | Select the Coded widget from the field drop-down list. |
Widget Header | Enter the name of the widget in the textbox. |
Show Widget Header | Enable the bar to show widget header. |
Appearance
This section contains the list of features using which the Application Designer can select Title, Background and Border.
Figure: Appearance tab
Field Description
Header Separator | |
Border | Select the border type of the widget. |
Width | Select the width of the widget. |
Color | Select the preferred color from the color palette. |
Background | |
Background Type | Select the preferred background type. Figure: Background |
Border | |
Border | Select the border by selecting desired Border Type from the drop-down list. |
Dimensions | |
Dimension | Select the height and width for the widget from the drop-down list. Figure: Dimension |
Code
This section contains the list of properties using which the Application Designer can configure the respective widget feature using HTML, CSS, and Java Scripts.
Figure: Code view
The following table contains a brief description of the types of Graphical widgets.
Border | |
---|---|
HTML | Type or insert the HTML code in the editor space. |
CSS | Add the CSS script in the editor space. |
Client Script | Type the Client Script. |
Create a custom widget to display business metrics
This section contains sample of the scripts which can be added under the widget editor field to customize the widget.
To create a unique widget, perform the following steps:
- Navigate to Code tab to open the script field.
- Replace the HTML template with the following script:
This script performs a counter section showing the business growth of your organization.Markup<html> <head> <!-- add the following awesome font to the webpage --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> * { box-sizing: border-box; } .column { /* box toward left of the window screen */ float: left; /*divide each counter box in equal size*/ /* 4 counters of 25% of screen size*/ width: 25%; /*spacing between each box */ padding: 4px; } .row { /* Specify the margin for the row class */ margin: 3px; } /* Style the class named block*/ .block { padding: 10px; text-align: center; background-color: Aqua; color: Black; } /* Provide styling for when mouse will move over the counter*/ .block:hover { transform: scale(1.1); background-color: brown; transition-duration: 2s; color: white; } .fa { font-size: 50px; } </style> </head> <body> <center> <p> Hello, Welcome to ACME Summit Website! </p> <p>A sneak peek to your business growth metrics. </p> <div class="row"> <div class="column"> <div class="block"> <!-- Add user icon to the counter --> <p> <i class="fa fa-user"> </i> </p> <h3> 200+ </h3> <p> Product Releases </p> </div> </div> <div class="column"> <div class="block"> <!-- Add book icon to the counter --> <p> <i class="fa fa-book"> </i> </p> <h3> 100+ </h3> <p> Knowledge Articles </p> </div> </div> <div class="column"> <div class="block"> <!-- Add smilie icon to the counter --> <p> <i class="fa fa-smile-o"> </i> </p> <h3> 150k+ </h3> <p> Happy Customers </p> </div> </div> <div class="column"> <div class="block"> <!-- Add coffee cup icon to the counter --> <p> <i class="fa fa-coffee"> </i> </p> <h3> 50+ </h3> <p> New Releases-2023 </p> </div> </div> </div> </center> </body> </html>
- Save your pages to view the changes. The page displays the business progress metrics of the organization.Figure: Custom widget displaying the business growth metrics