Coded Widget

25 Nov 2024
5 Minutes to read

Coded Widget

Updated on 25 Nov 2024
5 Minutes to read

Article summary

Did you find this summary helpful?

Thank you for your feedback

Coded widget lets you create any widget functionality using HTML, CSS, and Client Script and design custom widgets.

Coded widget (3)

User persona: Application Designer

Let's explore the following Use Case for designing the Coded widget!

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.

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:

Use HTML to structure the widget.
Use JavaScript to fetch data from your service request database or API. This data should include the request ID, request type, and current status.
Update the widget's HTML to display the fetched data.

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.

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.

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><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

Note

You can also create similar widgets, such as a change calendar, by customizing the script to display scheduled changes in a calendar format.

Was this article helpful?

What's Next

Publish Service Portal

Table of contents