Service Apps Templates - Oxygen Theme


Note: Template configuration using the Oxygen theme is specific to Service Apps versions Oxygen and earlier.

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

Templates use widgets with graphical elements, some of which are customizable by adding HTML and CSS codes.

Procedure: How to customize an app using the Oxygen theme

Note: In each 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 Service Apps 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 Service Manager and those of Self Help.

Example

         Knowledge base - Example.png

Procedure

Step 1: Adding the CSS code.

Caution: You must insert the Origin field in the Service Manager 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 Service Manager and Service Apps 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 2020/10/26 10:22
Created by Administrator XWiki on 2018/04/27 10:07

Shortcuts

Powered by XWiki ©, EasyVista 2021