Coded Widget
  • 22 Apr 2024
  • 3 Minutes to read
  • PDF

Coded Widget

  • PDF

Article summary

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.
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:
  • 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.

  1. Navigate to Design Portal > Widgets > Add Widget.
     Figure: Adding Widgets
     
  2. Customize the Service Portal by dragging the widget from the widget list screen.
    Figure: Coded widget
  3. 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 HeaderEnter the name of the widget in the textbox.
Show Widget HeaderEnable 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

BorderSelect the border type of the widget.
WidthSelect the width of the widget. 
ColorSelect the preferred color from the color palette.
Background
Background TypeSelect the preferred background type.
Figure: Background
Border
BorderSelect 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.
CSSAdd the CSS script in the editor space.
Client ScriptType 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:

  1. Navigate to Code tab to open the script field.
  2. 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>
  3. Save your pages to view the changes. The page displays the business progress metrics of the organization.Coded widget(2)Figure: Custom widget displaying the business growth metrics




Was this article helpful?

What's Next
Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.