Dashboard Component Forms

Components can be created to be used on the Dashboard, and once created will appear in the right-hand column list on the Drag and Drop designer. These can generate specific ticket forms, QuickCalls, Views, Reports etc.

Numerous Components are shipped as standard with SupportDesk, such as specific buttons. It is possible to edit these using html, or new Components can be created from scratch. Supervisors can create new Components by accessing Settings > Forms & Dashboards, and selecting Component from the Form Type drop-down:form type selector: component

Then click the “Add New Form add button” button. Enter a name for the component, and the enter the html in the large field on the Form tab:component form html field

The code shown below is one example of a single button that has been built to summon a QuickCall named “Quick Call 1” when clicked. Wording has been left generic in this example:

<a class=”view-button blue” href='[System:Action]QC&QC=QC000001′>New Thing<span>+</span></a><style>body.right-panel .view-button.blue{
background: lightblue;
border:0 solid #aaa;
border-radius: 5px;
box-shadow:inset 0px 0px white;
float: left;
text-align: center;
text-decoration: none;
line-height: 40px;
padding: 10px;
font-size: 16px;
color:#3a3a3a;
-webkit-transition: 0.2s ease-out;
-moz-transition:  0.2s ease-out;
-o-transition:  0.2s ease-out;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
opacity: 1;
height:100px;
width:100%;
}

.view-button:hover span{
opacity: 0.8;
}

.view-button.green span{
width: 100%;
float: left;
font-size: 50px;
font-weight: bold;
color:white;
}
</style>

Pasting this code into the large field on the Form tab will result in the following button to appear in the preview pane when Refresh or Save are selected:filled component form html field

Save the button design, then on the Details tab, ensure that the Component (Make this form available for use in the Form Designer) tick box is selected and saved. This will ensure that the button appears in the Component column on the drag and drop dashboard designer:component form tickbox

PreviousNext