Service Apps Templates - Oxygen Theme


Product name - ev sas.png Oxygen templates use widgets with graphical elements, some of which are customizable by adding HTML and CSS codes.

Caution

  • Users must be familiar with HTML and CSS before they can customize widgets with the Oxygen version.

Procedure: How to customize an app using the Oxygen theme

Note: In each Product name - ev sas.png template available for download in the wiki, a table shows the list of widgets that can be configured using the Oxygen theme.

CommonProcedure

Step 1: Opening the Product name - ev sas.png app.

1. Open your app in the graphic editor via Apps - Application properties icon.png in the App Gallery.
 

Step 2: Adding Oxygen customizations.

1. Click the widget you want to customize.

2. Select the Content > HTML Code section.

3. Copy-paste the CSS and HTML instructions indicated in the procedures below for each Oxygen theme item.

4. Adapt the code to your environment.

5. Click EVApps - GUI - Save icon.png.

Step 3: Testing the app.

1. Run the app via EVApps - GUI - Execute icon.png.

2. Check that your customization is correctly displayed.

EndCommonProcedure

List of customizable graphical items

Knowledge Base

Objective: Display the results of the knowledge base in the form of standard tiles.

  • The display can be different for the results of Product name - ev itsm.png and those of Product name - ev Self Help.png.

Example

         Knowledge base - Example.png

Procedure

Step 1: Adding the CSS code.

Caution: You must insert the Origin field in the Product name - ev itsm.png report.

/* Filter Self Help data and Service Manager data */
<div class="#[FIELD('Origin')]#">
   /* Display Service Manager tiles */
  <div class="evAppsKB_SM">
     <a pagelink="Page_Number">
        <div class="tile" style="height: 100px;">
            /* Display a color code based on the origin FIELD('Origin') (see Standard tile) */
           <div class="colorbar i#[FIELD('Origin')]#"><br></div>
           <div class="information-projet" style="padding-left: 20px; width: 97%;">
               /* Display the first two title rows. If you increase the "font-size", you must also increase the "height" */
              <strong style="font-size: 12px;font-size: 12px;display: block;height: 40px;overflow: hidden;">#[FIELD('Title')]# </strong>
              <span style="font-size: 12px;">ID: #[FIELD('Knowledge Number')]#</span>
           </div>
        </div>
     </a>
  </div>
</div>

<div class="#[FIELD('Origin')]#">
   /* Display Self Help tiles */
  <div class="evAppsKB_SH">
     <a pagelink="Page_Number">
        <div class="tile" style="height: 100px;">
            /* Display a color code based on the origin FIELD('Origin') (see Standard tile) */
           <div class="colorbar i#[FIELD('Origin')]#"><br></div>
           <div class="information-projet" style="padding-left:20px; width:97%">
               /* Display the first two title rows. If you increase the "font-size", you must also increase the "height" */
              <strong style="font-size: 12px;display: block;height: 40px;overflow: hidden;">#[FIELD('Title')]# </strong>
               /* Display the star rating of the knowledge article */
               #[DSTAG-star-rating ratingValue="#[FIELD('Rating Average')]#" writable="false"]#
           </div>
        </div>
     </a>
  </div>
</div>

Step 2: Adding the CSS code for Standard tile.

    Open url.png Click to display the detail of the code.
 

Step 3: Adding the CSS code.

.evSelfHelp .evAppsKB_SM {
display: none;
}
.evSelfHelp .evAppsKB_SH {
display: block;
}
.evServiceManager .evAppsKB_SM {
display: block;
}
.evServiceManager .evAppsKB_SH {
display: none;
}
.evAppsKB_SH .colorbar {
background: #92C9EC;
}
.evAppsKB_SM .colorbar {
background: #293E51;
}

Menu button

Objective: Apply a different color of each button of a Menu widget.

Example

         Menu button - Example.png

Procedure

Step 1: Adding the CSS code.

/* .small-block-grid-3 : Class targeting a menu with three columns. If the menu has four columns, replace 3 with 4 */
/* :nth-child(3) : Target the third item */
.small-block-grid-3 .cellPaddingStyle:nth-child(1) .menuCell {
border: 2px solid #8141d8;
}    
.small-block-grid-3 .cellPaddingStyle:nth-child(2) .menuCell {
border: 2px solid #678aee;
}
.small-block-grid-3 .cellPaddingStyle:nth-child(3) .menuCell {
border: 2px solid #fd0054;
}

Bar Chart

Objective: Modify the graphical display of a Bar Chart widget, i.e. width of bars, position on the axis, color, etc.

Example

         Graphical Bar chart - Example.png

Procedure

Step 1: Adding the CSS code.

.nv-bar {
width:7px !important;
x: 7.4%;
fill: #00BFDB!important;
stroke: #00BFDB!important;
}
.nvd3 .nv-axis path.domain{
opacity:0;
}
.nvd3 .nv-axis text {
y:10%!important;
x:5%!important;
}

Dynamic legend

Objective: Display a quick description of the different items of standard tiles. Filter the tiles.

  • You use a Filter List widget with a Oxygen graphic style. This enables you to match the colors defined in the legend with the filtered items.

Example

         Dynamic legend - Example.png

Procedure

Step 1: Adding the CSS code in the Filter widget of the app.

.li_horizontal {
border: none !important;
font-size: 10px
}
/* nth-child(1): Target the first item. Background: Choose color */
.li_horizontal:nth-child(1) .filterLabel::before {
content: " ";
display: inline-block;
width: 3px;
height: 20px;
background: #92C9EC;
margin-right: 10px;
}
/* nth-child(3): Target the third item. Background: Color */
.li_horizontal:nth-child(3) .filterLabel::before {
content: " ";
display: inline-block;
width: 2px;
height: 20px;
background: #293E51;
margin-right: 10px;
}

Static legend

Objective: Display a quick description of the different items of standard tiles.

Examples

  • Action To Do tile: The legend is used to display:
    • The priority of the ticket based on the color of the tile border.
    • The incident or service request.
               Static legend - Example 1.png
  • CI tile: The legend is used to display:
    • The type of CI based on the color of the tile border.
               Static legend - Example 2.png

Procedure

Step 1: Adding the CSS code.

Note: Each item can be added one after another in a Secured HTML widget.

/* Display side bar in color. Replace xxxxxx with the hexadecimal code of the color you want */
<span style="background:#xxxxxx; display:inline-block; height:15px; width:2px; margin-right:8px; margin-left:12px"></span> xxxxxx
/* Display image items. Replace src="xxxxxx" with the URL of the image and xxxxxx with the value required */
<span style="display:inline-block"><img class="fr-draggable" src="xxxxxxxxx" style="margin-right:8px; margin-left:12px; height:15px; width:auto; display:block;"></span>xxxxxx

Border

Objective: Recognize with a blue border which data blocks are clickable.

Examples

         Border - Example 2.png     Border - Example 1.png

Procedure

1. Select the Theme > Border section in the widget.

2. Modify the color and width of the border.

Menu - Mobile

Objective: Insert a collapsible sidebar menu in Mobile apps.

Example

         Mobile menu - Example.png

Procedure

Note: To adapt an existing collapsible menu from a template app, you should proceed as described in steps 2 and 3.
 

Step 1: Adding the button for opening the collapsible menu in a Secured HTML widget.

<span class="menu_btn"></span>

Step 2: Adding the menu in another Secured HTML widget.

Caution: The Secured HTML widget must be positioned at the bottom of the page. The entire app must be in the same layout.

<div id="menu">
    /* Close button displayed when the menu is opened. Modify the URL of the image or delete the img tag to insert text only */
   <span class="close" style="display: none;"><img src="activities/com/demoref/59f1ff7cf3b1b/resources/upload/d39a5c44e14d39bb4b69f718cfa8691641e03210.png" class="fr-draggable">Close</span>
   <ul>
        /* li tags: Menu items - class="active": Select page link and apply CSS code */
        /* Home link */
       <li class="active"><span pagelink="59df2dd2b39e9"><img src="activities/com/demoref/59f1ff7cf3b1b/resources/upload/7708733c01a6420da3f8a490b08f6f242dc7f60c.png" class="fr-draggable">Home</span></li>
        /* Other links */
       <li><span pagelink="59df7be8bea5d"><img src="activities/com/demoref/59f1ff7cf3b1b/resources/upload/438f0766677c734d7083471fe1e7b9cc8d681bcb.png" class="fr-draggable">Cost Management</span></li>
   </ul>
</div>

Step 3: Adding the CSS code.

<style>
   /* Hide items if they are off-screen */
   body {
   overflow-x: hidden;
   overflow-y: auto;
   margin: 0;
    }
   /* Style of the button for opening the menu. Modify the URL of the image */
   .menu_btn {
   background: url(activities/com/demoref/59f1ff7cf3b1b/resources/upload/84f03bf01ff675ccbc355f21978ecfafecead62e.png) center center no-repeat;
   background-size: 70%;
   display: block;
   height: 42px;
   width: 42px;
   position: absolute;
   top: 18px;
   left: 10px;
    }
   /* Menu parameters. By default, positioned off-screen */
   #menu {
   height: 100%;
   position: fixed;
   background: #fff;
   border-right: solid 1px #cfd3d6;
   top: 0;
   bottom: 0;
   height: 100%;
   width: 240px;
   left: -240px;
   z-index: 9999;
   padding-top: 75px;
    }
   #menu ul {
   padding: 0;
   margin: 0;
   list-style: none;
   color: #ccc;
    }
   #menu ul li {
   height: 50px;
   padding-left: 30px;
   line-height: 50px;
   font-weight: normal;
    }
   /* Define active link effect */
   #menu ul li.active span {
   color: #0aa89e !important;
   font-weight: bold;
    }
   /* Define link hover effect */
   #menu ul li:hover {
   color: #ccc;
   font-weight: bold;
    }
   #menu ul li a {
   color: #ccc;
   text-decoration: none;
   font-size: 14px;
   display: block;
    }
   #menu ul li img {
   height: 17px;
   margin-right: 12px;
    }
   /* Close button parameters */
   .close {
   display: block;
   height: 47px;
   width: 100px;
   position: absolute;
   top: 18px;
   left: 30px;
   line-height: 47px;
    }
   .close img {
   width: 19px;
   margin-right: 8px;
    }
</style>

 

Step 4: Adding the JavaScript code in a Secured HTML widget.

Note: The code can be identical to the one for the Menu widget.

<script>
    $(document).ready(function()
    {
        $(".close").css("display", "none");
        var isMenuOpen = false;
         $(".menu_btn").click(function()
         {
           if (isMenuOpen == false)
            {
                $("#menu").clearQueue().animate(
                {
                    left: "0"
                })
                $("#menu").parent(".main-view").parent(".ng-isolate-scope").parent(".styleCommon").clearQueue().animate(
                {
                   "height": "100vh"
                })
                $("#menu").parent(".main-view").parent(".ng-isolate-scope").parent(".styleCommon").clearQueue().animate(
                {
                   "height": "100vh"
                })
                $("#menu").parent(".main-view").parent(".ng-isolate-scope").parent(".styleCommon").parent(".divbeforecontent").parent(".widget_container").parent(".ng-scope").parent(".ng-scope").parent(".ng-scope").parent(".ng-scope").parent(".ng-scope").parent(".ng-scope").parent(".foundationContainer").css("position", "absolute")
                $("#menu").parent(".main-view").parent(".ng-isolate-scope").parent(".styleCommon").parent(".divbeforecontent").parent(".widget_container").parent(".ng-scope").parent(".ng-scope").parent(".ng-scope").parent(".ng-scope").parent(".ng-scope").parent(".ng-scope").parent(".foundationContainer").css("top", "0")
                $(this).fadeOut(200);
                $(".close").fadeIn(300);
                isMenuOpen = true;
            }
        });
        $(".close").click(function()
        {
           if (isMenuOpen == true)
            {
                $("#menu").clearQueue().animate(
                {
                    left: "-240px"
                })
                $("#page").clearQueue().animate(
                {
                   "margin-left": "0px"
                })
                $("#menu").parent(".main-view").parent(".ng-isolate-scope").parent(".styleCommon").clearQueue().animate(
                {
                   "height": "0px"
                })
                $(".styleCommon .small-12:first-child>.foundationContainer:last-child").css("position", "initial")
                $(".styleCommon .small-12:first-child>.foundationContainer:last-child").css("top", "auto")
                $(".styleCommon .medium-12:first-child>.foundationContainer:last-child").css("position", "initial")
                $(".styleCommon .medium-12:first-child>.foundationContainer:last-child").css("top", "auto")
                $(this).fadeOut(200);
                $(".menu_btn").fadeIn(300);
                isMenuOpen = false;
            }
        });
    });
</script>

Menu - Desktop

Objective: Insert a sidebar menu in Desktop apps.

Example

         Desktop menu - Example.png

Procedure

Step 1: Adding the HTML code to the Menu widget of the app.

/* Add to the Home menu item */
<div class="principal-link">Home</div>
/* Add to each of the other menu items */
<div class="global-link">Other link</span></div>
/* Add a bold tag to the active page */
<div class="principal-link"><b>Home</b></div>
/* Add sub-title */
<div class="global-link">TITLE<br><span class="sub-link">Sub-title<span></div>

 

Step 2: Adding the CSS code.

/* Design links */
.global-link {
line-height: 17px!Important;
padding-top: 22px!Important;
padding-left: 5px;
padding-bottom: 12px!Important;
position: relative;
height: 60px;
}
/* Center image vertically */
#w_18829261155a86a1cc5ff6a  .localIconStyle{padding-top:20px !important}
.principal-link {
line-height: 25px!Important;
padding-top: 18px!Important;
padding-bottom: 12px!Important;
position: relative;
height: 60px;
padding-left: 5px;
}
.global-link-color {
color: #666666 !important;
font-weight: bold!Important;
}
/* Design sub-title */
.sub-link {
color: #a2a2a2;
font-size: 12px!Important;
}
/* Design indicator. #w_18829261155a86a1cc5ff6a is used to target a widget using its ID*/
#w_18829261155a86a1cc5ff6a .menuIndicatorStyleBg {
color: #99d1cd!Important;
width: 1.6rem!Important;
height: 1.6rem!Important;
left: 0rem!Important;
position: absolute!Important;
right: 0px!Important;
top: 11px!Important;
padding-right: 10px;
}
#w_18829261155a86a1cc5ff6a .labelAlignStyle {
position: relative!Important;
text-align: left!Important;
}
#w_18829261155a86a1cc5ff6a .com_easyvista_widget_menuController .menuIndicatorContainer .menuIndicator {
text-align: right !important;
}   
#w_18829261155a86a1cc5ff6a .com_easyvista_widget_menuController .menuTableContainerFull {
display: table;
padding-left: 25px;
}
/* Box shadow of the indicator */   
#w_18829261155a86a1cc5ff6a .com_easyvista_widget_menuController .indicatorShadow {
box-shadow: none;
}
#w_18829261155a86a1cc5ff6a  .externalIconStyle{padding-top:20px !important}

Popup

Objective: Apply an Oxygen graphic style to questionnaires displayed in popups.

  • You can customize Product name - ev itsm.png and Product name - ev sas.png questionnaires.

Example

         Popup - Example.png

Procedure

Step 1: Adding the CSS code.

/* Color of the popup title */
.easyvistaQuestionnaire .questionnaire-header h4 {
color: #666 !important;
}
.easyvistaQuestionnaire .questionnaire-header {
border: none !important;
}
/* Color of all color items */
.dlgBox .dlgBoxTitle, .authTitle {
background: #fff !important;
}
/* Color of popup text */
.dlgBoxTitleSpan {
color: #666!important;
}
.dlgBox .dlgBoxFooter {
background-color: #fff!important;
border-top: 1px solid #fff!important;
}
button.dlgBoxButton.button.ng-binding {
border: solid 1px #999!important;
background: #fff ;
color: #666 !important;
}
.actionsWizard button#actionsWizard1 {
border: solid 1px #999;
background: #fff;
color: #666 !important;
}
/* Style of buttons */
.easyvistaQuestionnaire .questionnaire-bottom .button {
border: solid 1px #999 !important;
background: #fff;
color: #666 !important;
}  
button, .button {
width: auto;
}
/* Color of buttons on hover */
button:hover, button:focus, .button:hover, .button:focus {
background-color: #00ab9f !important;
border: 0.1rem solid transparent;
}
/* Color of close icon */
.dlgBox .close-reveal-modal,.dlgBox .reveal-modal .close-reveal-modal {
color: #ee0a08 !important;
}
/* Move close icon based on responsive web design */
.reveal-modal.dlgBox.PagePopup.mobile:not(.prompt) a.close-reveal-modal{right:10%;}

Timeline

Objective: Display information related to the duration of an item in a timeline, e.g. contract timeline (snapshot as regards its expiry date), incident timeline (snapshot as regards the SLA target), etc.

Example

         Timeline tile - Example.png

Procedure

Step 1: Adding the HTML code.

/* FIELD('xxx_datapicker '): Replace with the required data picker field */

<div class="timeline">
   <div class="timeline-top">
       <div class="start">
           <div class="start-img"><img class="fr-draggable" src="activities/com/demoref/5a859823dd5bd/resources/upload/b556d15a06885eba1d4ee58f15a4645c54b90be6.png"></div>
           <div class="start-content"><strong>START</strong>
               <br><span style="color:#ccc">#[FIELD('xxx_datapicker')]#</span>
           </div>
       </div>
       <div class="middle">
           <div class="middle-content"><strong>Prior notice</strong>
               <br><strong style="color:#ccc">#[FIELD('xxx_datapicker')]# Month</strong>
           </div>
           <div class="middle-img"><img class="fr-draggable" src="activities/com/demoref/5a859823dd5bd/resources/upload/0bc4534b99bdac064a44e661033e692005969dec.png"></div>
       </div>
       <div class="end">
           <div class="end-img"><img class="fr-draggable" src="activities/com/demoref/5a859823dd5bd/resources/upload/7d6919a01756c04844746f5ce01c01b24d715773.png"></div>
           <div class="end-content"><strong>END</strong>
               <br><span style="color:#ccc">#[FIELD('xxx_datapicker')]#</span>
           </div>
       </div>
       <div style=" height:1px; background:#ccc; display: block; margin-top: 50px;"><br></div>
   </div>
   <div class="timeline-bottom">
       <div><strong>#[FIELD('xxx_datapicker')]#</strong>month duration</div>
   </div>
</div>

 

Step 2: Adding the CSS code.

.timeline {
width: 100%;
height: 120px;
border: solid 1px #ccc;
margin-top: 10px;
background: #ffffff
}
.timeline-top {
width: 84%;
margin: auto;
height: 43px;
padding-top: 14px;
}
.start {
width: 33%;
float: left;
}
.middle {
width: 33%;
float: left;
text-align: center;
}
.end {
width: 33%;
float: left;
}
.start-img {
width: 15px;
float: left;
margin-right: 5px;
}
.middle-img {
width: 15px;
float: right;
margin-right: 5px;
}
.start-content {
float: left;
margin-top: 15px;
}
.middle-content {
float: left;
margin-top: 15px;
}
.end-img {
width: 15px;
float: right;
margin-left: 5px;
}
.end-content {
float: right;
margin-top: 15px;
text-align: right;
}
.timeline-bottom {
clear: left;
text-align: center;
color: #ccc;
padding-top: 10px;
}
.timeline-bottom strong {
font-size: 25px;
color: #000;
}

Standard tile

Objective: Associate dynamically the display of certain information of a list of items with a predefined color, e.g. associate a color code with a type of equipment or a ticket priority, etc.

Examples

  • List of contracts
             Tile - Example 1.png
  • List of CI
             Tile - Example 2.png
  • List of actions          
             Tile - Example 3.png

Procedure

Step 1: Adding the HTML code for basic tiles.

/* FIELD('xxx_datapicker '): Replace with the required data picker field */

/* N page: Number of the page you want */
<div class="tile" pagelink="Page Number">
    /* Display a color code based on the origin FIELD('Origin') */
   <div class="barcolor #[FIELD('xxx_datapiker')]#"><br></div>
    /* Display a Service Manager logo */
   <div class="logo">#[FIELD('xxx_datapicker')]# </div>
   <div class="information-projet">
        Title: <strong style="color:#000000;"> #[FIELD('xxx_datapicker')]#</strong>
       <br>
        Title: <strong style="color:#000000;"> #[FIELD('xxx_datapicker')]#</strong>
   </div>
    /* Display additional information, e.g. action buttons, images of categories, user photos, etc. */
   <div class="more-information">
       <div class="global-information">
           <div class="information #[FIELD('xxx_datapicker')]#"><br></div>
           <div class="information">
               <img src="#[FIELD('xxx_datapicker')]#">
           </div>
       </div>
   </div>
</div>

 


Step 2: Adding the CSS code for basic tiles.

/* Parameters of the large tile */
.tile {
width: 100%;
background: #fff;
border: solid #ccc 1px;
height: 65px;
}
.tile div {
float: left;
}
/* Parameters of the supplier logo. Background: Display a default image if there is no logo. */
.logo {
width: 15%;
height: 65px;
margin-right: 10px;
padding-top: 11px;
padding-left: 12px;
background: url(activities/com/demoref/5a1c264d0bcd0/resources/upload/8a1448755a32f01080ff980a87edd15f9d612b8d.png) center center no-repeat
}
.logo img {
width: 40px;
background:#fff
}
/* Parameters of the Information section */
.information-projet {
width: 53%;
font-size: 11px;
color: #999;
line-height: 18px;
padding-top: 12px
}
/* Circular image section */
.more-information {
width: 26%;
}
/* Parameters of the circular image */
.more-information .information {
width: 35px;
height: 35px;
margin-right: 5px;
background: #f5f5f5;
border-radius: 35px;
margin-top: 14px;
overflow: hidden;
background-size: 40% !important;
background: url(activities/com/demoref/5a1c264d0bcd0/resources/upload/13c2e6837d83922ca089af5f726c7500e858ec06.png)no-repeat center center, #f5f5f5;
}
/* Insert the manager's photo in the circular cell */
.more-information .information img {
width: 100%;
height: auto
}
/* Color of the vertical bar based on data */
.barcolor {
height: 100%;
width: 2px;
}
/* Color of the side bar. Define all terms in all languages in a CSS class */
.Telecom {
background: #66cc33;
}
/* Images of categories based on data */
.global-information .Telecom {
background: url(activities/com/demoref/5a1c264d0bcd0/resources/upload/61d7770da0b39465731b9a1a9f28d943bdfdb68e.png) no-repeat center center, #f5f5f5 !important;
}

Timeline tile

Objective: Combine items from a standard tile and a timeline.

Example

  • Items specific to tiles: border based on the priority, Alert image, information on the ticket.
  • Timeline displaying the incident's progress.
             Timeline tile - Example.png

Procedure

Step 1: Adding the HTML code.

/* FIELD('xxx_datapicker '): Replace with the required data picker field */

<div class="tile">
<div class="barcolor #[FIELD('Urgency')]#"><br></div>
<div class="logo #[FIELD('Full Category')]#"><br></div>
<div class="information-projet">
    N°: <strong style="color:#000000;">#[FIELD('N°')]#&nbsp;</strong>
   <div class="more-information">
       <div class="global-information">
            /* FIELD('xxx_datapicker '): Requesting Person (Picture): recipient's photo */
           <div class="information"><img src="#[FIELD('Requesting Person (Picture)')]#" class="image-not-found fr-draggable">&nbsp;&nbsp;</div>
       </div>
   </div>
   <span class="description-tile">Description: <strong style="color:#000000;">#[FIELD('COMMENT')]#&nbsp;</strong></span>
   <div class="timeline">
       <div class="timeline-top">
           <div class="start">
               <div class="start-img" style=""><img class="fr-draggable" src="activities/com/demoref/5a143804b0a0f/resources/upload/aae9445ff81b218af0b7de87d282b4d26f55e7a9.png"></div>
               <div class="start-content" style=""><strong>Creation</strong>
                   <br><span style="color:#ccc">#[FIELD('Creation Date')]#</span>
               </div>
           </div>
           <div class="end">
               <div class="end-img"><img class="fr-draggable" src="activities/com/demoref/5a143804b0a0f/resources/upload/f7f5e514969fc373f3d8d19741f71ed8d878b7ed.png"></div>
               <div class="end-content" style=""><strong>SLA Target</strong>
                   <br><span>#[FIELD('Maximum Resolution Date')]#</span>
               </div>
           </div>
           <div style=" height:1px; background:#ccc; display: block; margin-top: 50px;"><br></div>
       </div>
   </div>
</div>

 

Step 2: Adding the CSS code.

.tile {
width: 95%;
background: #fff;
border: solid #ccc 1px;
height: 200px;
}
/* Parameters of the supplier logo */
.logo {
width: 15%;
height: 65px;
background-size: 30px !important;
float: left;
}
.logo img {
width: 18px;
padding-top: 21px;
display: block;
margin: auto;
}
.com_easyvista_widget_DataViewer Controller .currentRecordSelected {
border: none !important
}
/* Parameters of the Information section */
.information-projet {
width: 69%;
font-size: 11px;
color: #999;
line-height: 14px;
padding-top: 12px;
padding-left: 5px;
float: left;
}
/* Parameters of the circular image section */
.more-information {
width: 13%;
float: left;
}
.more-information .information {
width: 50px;
height: 50px;
margin-right: 5px;
background: #f5f5f5;
border-radius: 35px;
margin-top: 14px;
overflow: hidden;
background-size: 30% !important;
background: url(activities/com/demoref/5a1c264d0bcd0/resources/upload/13c2e6837d83922ca089af5f726c7500e858ec06.png)no-repeat center center, #f5f5f5;
}
/* Insert the contract manager's photo in the circular cell */
.more-information .information img {
width: 100%;
height: auto
}
/* Color of the vertical bar for Urgency based on data */
.barcolor {
height: 100%;
width: 4px;
float: left;
}    
.Haute {
background: #ec5d57;
}
/* Color of the vertical bar for Priority based on data */
.i1 {
background: #ec5d57;
}    
.logo.Demande {
background: url(activities/com/demoref/5a143804b0a0f/resources/upload/41d0f205483e8eab8c90b4dbb3ad444a9d4c37b5.png) no-repeat center center
}
.com_easyvista_widget_DataViewer Controller .displayViewTile .mix {
display: block !important;
float: left;
height: 163px;
}
.description-tile {
font-size: 11px;
color: #999;
line-height: 18px;
padding-left: 21px;
margin-top: 100px;
display: block;
height: 33px;
overflow: hidden;
position: absolute;
top: -22px;
width: 95%;
}
.description-tile p {
font-size: 11px;
color: #999;
line-height: 18px;
display: inline
}
.description-tile span {
font-size: 11px;
color: #999;
line-height: 18px;
display: inline;
font-weight: normal;
}
.description-tile strong {
font-size: 11px;
color: #999;
line-height: 18px;
display: inline;
font-weight: normal;
}
.timeline {
width: 95%;
float: left;
position: absolute;
top: 112px;
}
.timeline2 {
width: 99%;
float: left;
}
.timeline-top {
width: 84%;
margin: auto;
height: 43px;
padding-top: 14px;
}
.start {
width: 50%;
float: left;
}
.end {
width: 50%;
float: left;
}
.start-img {
width: 15px;
float: left;
margin-right: 5px;
}
.start-content {
float: left;
margin-top: 15px;
font-size: 11px;
}
.end-img {
width: 15px;
float: right;
margin-left: 5px;
}
.end-content {
float: right;
margin-top: 15px;
text-align: right;
font-size: 11px
}

Form tile

Objective: Place a Details button in standard tiles displaying detailled information of the ticket in a form.

Example

         Form tile - Example 2.png

Procedure

Step 1: Adding the HTML code.

<div class="tile">
   <div class="barcolor i#[FIELD('Priority')]#" style=""><br></div>
   <div class="tile_bis">
       <div class="tile_top" style="text-align:center;"><span style="color:#a0a0a0;">CHANGE:</span>&nbsp;<strong><span style="color: rgb(0, 0, 0);">#[FIELD('Request Number')]#</span></strong></div>
       <div class="tile_left"><img src="#[FIELD('Recipient%20(Picture)')]#" class="image-not-found fr-draggable" style="width:65px; border-radius:50%;">
           <br>
       </div>
       <div class="tile_right_1" style="text-align:left!Important; margin-left:5px;"><span style="color:#a0a0a0;">REQUESTED BY</span>
           <br><strong><span style="color: rgb(0, 0, 0);">#[FIELD('Recipient')]#</span></strong>
           <br>
       </div>
       <div class="tile_right_2" style="text-align:left!Important; margin-left:5px;"><span style="color:#a0a0a0;">CATEGORY</span>
           <br><strong><span style="color: rgb(0, 0, 0);">#[FIELD('Change Description (Last Level)')]#</span></strong>
           <br>
       </div>
       <div class="tile_bottom" style="text-align: left;">
           <br><span style="color:#a0a0a0;">Details</span>
       </div>
   </div>
</div>

 

Step 2: Adding the CSS code.

/* Style of the main tile */
.tile {
width: 95%;
background: #fff;
border: solid #ccc 1px;
border-left: none;
height: 100%;
font-size: 10px!Important;
color: #666666;
}
.tile_top {
float: left;
width: 95%;
font-size: 12px!Important;
border-bottom: 1px solid #ced3d6;
float: left;
margin-bottom: 5px;
padding-bottom: 5px
}
.tile_left {
float: left;
width: 20%;
margin-top: 5px;
}
.tile_right {
float: left;
text-align: right;
width: 75%;
margin-top: 5px;
Line-Height: 1.4
}
.tile_bottom {
float: left;
width: 95%;
}
.tile_bis {
margin-left: 10px;
padding-top: 10px;
}
/* Style of the Form tile */
.tile_2 {
width: 95%;
background: #fff;
border: solid #ccc 1px;
border-left: none;
height: 350px;
font-size: 10px!Important;
color: #666666;
border-top: none;
}
.tab_bottom {
padding-bottom: 5px;
height: 80px;
position: absolute;
bottom: -30px;
width: 200px;
}
.tab_bis {
margin-left: 0px;
padding-top: 5px;
text-align: left!Important;
padding-left: 10px;
height: 100%;
}
.tile_right_1 {
float: left;
text-align: right;
width: 75%;
margin-top: 5px;
Line-Height: 1.4;
}
.tile_right_2 {
float: left;
text-align: right;
width: 75%;
margin-top: 5px;
Line-Height: 1.4;
}
.tab_left {
padding-bottom: 5px;
}
.barcolor_2 {
height: 350px;
width: 2px;
float: left;
}
/* Color of the vertical bar based on data */
.barcolor {
height: 100%;
width: 2px;
float: left;
}
.i1 {
background: #ec5d57;
}
.com_easyvista_widget_DataViewer Controller .displayViewTile .mix {
display: block !important;
float: left;
height: 300px;
}
.com_easyvista_core_visualwidgetController .panel p {
font-size: 10px;
Font-Weight: Bold;
}
.fr-view img,
.registeredWidget img {
position: relative;
max-width: 65%!mportant;
}
.tab_pop {
font-size: 10px;
}
.com_easyvista_widget_DataViewer Controller .triggered-cta-box-close {
display: none;
}
.wait-request {
display: none;
}  
.com_easyvista_widget_DataViewer Controller .questionnaire-wrapper {
padding: 0 10px;
margin-right: 15px;
padding-bottom: 10px;
}
.com_easyvista_widget_DataViewer Controller .questionnaire-wrapper {
padding: 0 10px;
margin-right: 0px!Important;
padding-bottom: 10px!Important;
padding-right: 0px!Important;
padding-left: 0px!Important;
}
.com_easyvista_widget_DataViewer Controller .questionnaire-wrapper {
margin: 0px 0px;
border: none;
}
/* Accordion between Tile and Form */
.accordion-navigation {
height: 140px !important;
position: relative;
z-index: 1;
}
.questionnaire-wrapper .dtv-template-html.ng-binding.ng-scope {
margin-top: -1px;
z-index: 150;
position: relative;
}
.dtv-a {
padding-bottom: 0!important
}
.questionnaire-wrapper1229530932599eaa3edc581.content:before {
display: none!Important;
}
.questionnaire-wrapper8256055035a605ebc9939b.content:before{
display: none!Important;
}
.questionnaire-wrapper2709225495a605f77b5fe1.content::before {
display: none!Important;
}
.wrapper16517514385a605fb6b8a5e.content::before {
display: none!Important;
}
.questionnaire-wrapper16517514385a605fb6b8a5e.content::before {
display: none!Important;
}
.questionnaire-wrapper10880014705a605f1d260fa.content::before {
display:none;
}
.questionnaire-wrapper17228581265a60600c0b19d.content::before {
display:none;
}

Line tile

Objective: Display list items in the form of rows.

Examples

  • Standard tile
             Line tile - Example 1.png
  • Line tile
             Line tile - Example 2.png

Procedure

Step 1: Adding the HTML code.

/* FIELD('xxx_datapicker '): Replace with the required data picker field */

/* N page: Number of the page you want */
<div class="tile" pagelink="N page">
   <div class="barcolor #[FIELD('Category (last level)')]#"><br></div>
   <div class="logo">#[FIELD('[COMMENT_SUPPLIER]')]#</div>
   <div class="information-projet-2">Ref:
       <br><strong style="color:#000000;">#[FIELD('Contract no.')]#</strong>
   </div>
   <div class="information-projet-2">End:
       <br><strong style="color:#000000;">#[FIELD('Scheduled expiry date')]#</strong>
   </div>
   <div class="information-projet-2">Prior Notice:
       <br><strong style="color:#000000;">#[FIELD('Prior notice (month)')]#</strong>
   </div>
   <div class="information-projet-2">Category:
       <br><strong class="#[FIELD('Category (last level)')]#">#[FIELD('Category (last level)')]#</strong>
   </div>
   <div class="information-projet-2">Owned by:
       <br><strong style="color:#000000;">#[FIELD('Manager')]#</strong>
   </div>
</div>

 

Step 2: Adding the CSS code.

.tile {
width: 100%;
background: #fff;
border: solid #ccc 1px;
height: 65px;
}
.tile div {
float: left;
}    
/* Parameters of the logo */
.logo {
width: 15%;
height: 65px;
margin-right: 10px;
padding-top: 11px;
padding-left: 12px;
background: url(activities/com/demoref/5a859823dd5bd/resources/upload/8a1448755a32f01080ff980a87edd15f9d612b8d.png) center center no-repeat
}
.logo img {
width: 40px;
background: #fff;
display: block;
margin: auto;
}
/* Parameters of the Information section */
.information-projet-2 {
width: 16%;
font-size: 11px;
color: #999;
line-height: 18px;
padding-top: 12px;
}
/* Color of the vertical bar based on data */
.barcolor {
height: 100%;
width: 2px;
}
.barcolor.Telecom {
background: #66cc33;
}
strong.Telecom {
color: #66cc33;
}
Tags:
Last modified by Unknown User on 2019/01/09 22:47
Created by Administrator XWiki on 2018/04/27 10:07

Shortcuts

Recent changes
•  Service Manager
•  Service Apps
•  Self Help

Glossary

Powered by XWiki ©, EasyVista 2020