# Tricks and hacks

# CSS for form buttons in page footer

```css
.tsUpdateButtons {
  position: fixed;
  bottom: 0px;
  width: 92%;
  max-width: 1200px;
  padding: 0px 0px 2px 0px;
  z-index: 26;
  background-color: transparent;
  opacity: 1;
} 
.submitOption, .updateSubmit { 
  max-width: 22%;
  line-height: 1;
  height: 26px;
}
```

# CSS for printing labels

The below case will style a certain dashboard widget outputting LI elements

```css
@page {
  margin: 0cm; /* page reset */
}
@media print {
  html * { margin: 0px; padding: 0px; } /* page reset */
  #Widget23 ul { padding: 12mm 6mm 12mm 6mm; margin-bottom: 0; }
  #Widget23 li { border: 0px; padding: 5mm; height: 33.9mm; width: 63.5mm; margin-right: 2mm; }
  #Widget23 li { border: 1px solid #EEEEEE; }   /* disable after print is validated */
}
```

The page setup is

- left margin 6mm
- top margin 12mm

The label layout is

- size 63.5mm x 33.9mm
- spacing 2mm

# Inline dashboard

In order to display a dashboard on a page for instance on an item add the following code to the custom script

```javascript
$('.mainContent form').append('<p class=inlineDashboard></p>');
$('.inlineDashboard').load('main?command=board&Dashboard=4&HideLinks=1');
```

# JQuery / script cheatsheet

### <span class="mw-headline" id="bkmrk-navigation-1">Navigation</span>

#### <span class="mw-headline" id="bkmrk-redirecting-non-admi-1">Redirecting non administrators away from list views</span>

```javascript
var params =  window.location.href.split("?")[1];
if( params == "SagID=251&command=list" ) {
  if( ! $( "#TempusServaPage" ).hasClass( "IsAdministrator" ) ) {
    console.log("redirecting to main from list");
    window.location.href = "main";
  }
}
```

#### <span class="mw-headline" id="bkmrk-prevent-edit-as-defa-1">Prevent edit as default command from lists</span>

```javascript
$(".tableList a").each(function() {
  url = $(this).attr("href").replace("=edit","=show");
  $(this).attr("href",url);
});
```

### <span class="mw-headline" id="bkmrk-files-1">Files</span>

#### <span class="mw-headline" id="bkmrk-make-all-file-links--1">Make all file links WebDAV enabled</span>

```javascript
$().ready( function() {
  $(".webdavFile").each( function() {
    $(this).next().attr("href", $(this).attr("href") );
  });
});
```

### <span class="mw-headline" id="bkmrk-input-manipulation-1">Input manipulation</span>

#### <span class="mw-headline" id="bkmrk-building-multiselect-1">Building multiselect values from existing services</span>

In the following example the field TERRITORY has autocomplete wuth Country values. Output format example: "Denmark, Finland, Sweden"

```javascript
function split( val ) {
  return val.split( /,\s*/ );
}
function extractLast( term ) {
  return split( term ).pop();
}
$(function() {
  $("#DATA_TERRITORY").autocomplete({
       source: function( request, response ) {
         $.getJSON( "autocomplete?type=dk.p2e.blanket.form.fields.ajax.FieldAjaxCountry&subtype=0", {
           term: extractLast( request.term )
         }, response );
       },
      autoFocus: true, 
      min_length: 2, 
      delay: 300, 
       search: function() {
         // custom minLength
         var term = extractLast( this.value );
         if ( term.length < 2 ) {
           return false;
         }
       },
       focus: function() {
         // prevent value inserted on focus
         return false;
       },
       select: function( event, ui ) {
         var terms = split( this.value );
         // remove the current input
         terms.pop();
         // add the selected item
         terms.push( ui.item.value );
         // add placeholder to get the comma-and-space at the end
         terms.push( "" );
         this.value = terms.join( ", " );
         return false;
       }
  });
});
```

#### <span class="mw-headline" id="bkmrk-making-radiobuttons--1">Making radiobuttons unselectable</span>

Clicking on a radiobutton a second type will remove the selection

```javascript
 $("input[type=radio]").click( function() {
  if( $(this).attr("checked") == 'checked' )
     $(this).removeAttr("checked").button("refresh");
 else
     $(this).attr("checked",true).button("refresh");     
 });
```

#### <span class="mw-headline" id="bkmrk-transform-text-input-1">Transform text input to selectbox</span>

Include the following function

```javascript
 function transformToSelectField( fieldName, valueList) {
   var select = "<select class='form-control' id='DATA_" + fieldName + "' name='DATA_" + fieldName + "' tabindex='2'>";
   var optionsList = valueList.split(" "); 
   for (var i = 0; i < optionsList.length; i++) { 
    var isSelected = ( getValue(fieldName) == optionsList[i] ) ? " selected " : "";
    select += "<option " + isSelected + " value='" + optionsList[i] + "'>" + optionsList[i] + "</option>";
   }
   select += "</select>";
   console.log( select );
   $("#DATA_" + fieldName).replaceWith( select );
 }
```

Example usage

```javascript
transformToSelectField( "NAME", "Alice Bob" );
```

### <span id="bkmrk-"></span><span class="mw-headline" id="bkmrk-copy-%2F-paste-1">Copy / paste</span>

#### <span class="mw-headline" id="bkmrk-selecting-text-for-e-1">Selecting text for easy copying</span>

```javascript
 //Get Exising Select Options    
 $('form#product select').each(function(i, select){
    var $select = $(select);
    $select.find('option').each(function(j, option){
       var $option = $(option);
       // Create a radio:
       var $radio = $('<input type="radio" />');
       // Set name and value:
       $radio.attr('name', $select.attr('name')).attr('value', $option.val());
       // Set checked if the option was selected
       if ($option.attr('selected')) $radio.attr('checked', 'checked');
       // Insert radio before select box:
       $select.before($radio);
       // Insert a label:
       $select.before(
         $("<label />").attr('for', $select.attr('name')).text($option.text())
       );
       // Insert a 
:
       $select.before("
");
    });
    $select.remove();
 });
```

[credit](https://stackoverflow.com/questions/2029267/jquery-convert-select-to-radio-buttons)

#### <span class="mw-headline" id="bkmrk-selecting-text-for-e-3">Selecting text for easy copying</span>

```javascript
 var textNode = document.getElementById('IdOfNodeToBeSelected');
 if (document.selection) {
   var range = document.body.createTextRange();
   range.moveToElementText(textNode);
   range.select();
 } else if (window.getSelection) {
   var selection = window.getSelection();
   var range = document.createRange();
   range.selectNodeContents(textNode);
   selection.removeAllRanges();
   selection.addRange(range);	
 }
```

# Many pages / long page name

The following code will shorten page selectors, unless they are hovered or active

```css
 .tablePageSelector td a { 
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 80%;
 }
 .tablePageSelector .tablePageSelectorElementActive a,
 .tablePageSelector td a:hover { 
   max-width: none;
 }
 .tablePageSelectorElementLeft, .tablePageSelectorElementRight { width: 2px; }
```

# Rounded corners missing in simple menu mode

When a user is running in the context of a simple user certain buttons will be hidden, and on displayed in the expanded menu ("burger"). Previous buttons might have their corners correctly, which can be mitigated by removing the items (they are normally just hidden with CSS).

```javascript
$('.menuSimple .menuPlus').remove();
```

Note: Removing the elements will also remove them from the burger menu.