Bei Cognos 11 ist das Design teilweise etwas unschön. Anstatt dies mühevoll über Themes oder eigene Klassen zu steuern oder, noch mühevoller, manuell in allen Objekten zusammen zu klicken, kann man einfach etwas CSS dem Kopf der Seite hinzufügen.

<style>
a {
  text-decoration: none !important;
}

button {
  cursor:hand;
}

select.pv, div.pv, input.pt {
    padding: 4px;
    border-radius: 4px;
    border: 1px solid #111;
    outline: none;
    font-family: Arial, helvetica;
    font-size: 11pt;
    background: white;
}

a.pl {
    font-size: 7pt;
    font-family: Arial, helvetica;
    color: #222;
}

button.bp {
    border-radius: 4px;
    outline: none;
    border: 1px solid #111;
    padding: 5px;
    color: black;
    background-color: #d0d0d0;
    background-image: none;
    width: 150px;
    height: 40px;
    font-family: Arial, helvetica;
    font-size: 11pt;
}

input.clsSelectDateEditBox {
    font-family: Arial, helvetica;
    font-size: 11pt;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid #111;
    outline: none;
}

table.clsSelectDateCalendarDialog {
    font-family: Arial, helvetica;
    font-size: 9pt;
}

input.clsSelectDateYearEditBox {
    font-family: Arial, helvetica;
    font-size: 9pt;
}

.clsCheckBoxRow label {
    font-family: Arial, helvetica;
    color: #333;
    font-size: 11pt;
    padding: 3px;
    /* line-height: 32px; */
}

.clsCheckBoxRow {
    height: 18px;
}

div#targetgroup span {
    font-family: Arial, helvetica;
    font-size: 9pt;
}

div#input_tg {
    font-family: Arial, helvetica;
    font-size: 9pt;
}

div#input_tg ul {
    padding-left: 30px;
}

div#input_tg li {
    line-height: 13pt;
}

.clsTextWidgetParseError select {
    border: none;
}

.clsTextWidgetParseError {
    border: 1px dotted red;
    border-radius: 4px;
}

.dijitCheckBox input {
    opacity: 1 !important;
    border: 1px solid #333;
    border-radius: 2px;
    width: 15px;
    filter: none !important;
}

.dijitCheckBox {
    border: none;
    /* border-radius: 3px; */
    background: none !important;
}
</style>

Die Auswahlboxen auf Cognos Eingabeaufforderungsseiten sind nicht sehr interaktiv. Das "Suche-Element" von Cognos ist allerdings sehr unhandlich und verursacht bei jeder Suche neue Datenbankabfragen.

Daher ist ein kleines Eingabefeld, um eine Auswahlliste schnell und einfach zu filtern, sehr praktisch.

Vor einer normalen Auswahlliste wird mit etwas HTML-Code ein Eingabefeld hinzugefügt. Und mit etwas JS-Code kann man dann die Auswahlliste filtern. Hierbei funktionieren auch Regular Expressions (z.B. mit ^ nach einem Text am Anfang oder mit $ am Ende suchen).

Vor dem Listenelement ein HTML-Element mit folgender Code-Zeile einfügen

<input type="text" id="client_search_field"></input>

Direkt nach dem Listenelement ein HTML-Element mit diesem Code-Snippet einfügen

<script>
  var elem = findControl("P_LST_KUNDE1")
  var options = elem.options
  var clientids = [];
  var clientnames = [];
  var clientelems = [];
  for (let x = 0, x_len = options.length; x < x_len; x++) {
    if (options[x].getAttribute("dv") != null) {
      clientids.push(options[x].value);
      clientnames.push(options[x].getAttribute("dv"));
      clientelems.push(options[x]);
    }
  }
  document.getElementById("client_search_field").addEventListener("input", function (evt) {
    findControl("P_LST_KUNDE1").value = "";
    clientelems.forEach(elem => elem.style.display = "none");
    clientelems.filter(function (elem, search) {
      var exp = new RegExp(this.toUpperCase().replace(/ /g, ".*"));
      if (elem.getAttribute("dv").toUpperCase().match(exp)) {
        elem.style.display = "";
        return true;
      } else {
        return false;
      }
    }, evt.target.value)
  });
</script>

Erst müssen die entsprechenden jQuery und dataTables JS-sourcen im Kopf der Berichtsseite geladen werden.

<link rel="stylesheet" href="/../js/jquery/datatables.min.css" type="text/css" media="all" /> 
<script src="/../js/jquery/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="/../js/jquery/datatables.min.js" type="text/javascript"></script>

Dann muss ein DIV-Element um die Datentabelle herum eingefügt werden, damit die Tabelle per JS angesprochen werden kann.

Hinter der Tabelle braucht es dann noch ein HTML-Element mit etwas Code, um die Cognos-Datentabelle in eine jQuery-dataTable umzuwandeln.

Um das deutsche Zahlenformat korrekt im Excel-Export zu erhalten, müssen die Zahlen vor dem Export formatiert werden. Dazu wird beim Laden der dataTable ein Array mit den Dimensionsspalten ermittelt. Dieses geschieht hier über die Spaltentitelhintergrundfarbe, kann aber auch über Namen etc. elegant gelöst werden.

<div tableWrapper>

<div id="dataTable_wrapper">

</div>

</div>

<datatable>

<script>
$('#dataTable_wrapper table').append("<thead>");
$('#dataTable_wrapper table thead').append($('#dataTable_wrapper table tbody').children()[0]);
let hdr = $('#dataTable_wrapper table thead').html();
hdr = hdr.replace(/<td /g,"<th ").replace(/<\/td>/g,"</th>");
$('#dataTable_wrapper table thead').html(hdr);
let dimColumns=[];

$('#dataTable_wrapper table thead th').each((id,elem)=>{
  if($(elem).css("backgroundColor")=="rgb(224, 224, 224)") {
    dimColumns.push(id);
  }
});

var dt = $("#dataTable_wrapper table").dataTable({
      scrollY: false,
      scrollX: false,
      scrollCollapse: true,
      paging: false,
     search: {
       regex: true,
      smart: false
     },
      ordering: true,
      order: [
      ],
      dom: 'Bfrtsp',
      buttons: [{
        extend: 'excelHtml5',
        exportOptions: {
          columns: ':visible',
          format: {
            body: (data, row, column, node) => {
             if(dimColumns.includes(column)) {
              return node.innerText;
            }else{
        return node.innerText.replace(/\./g,"").replace(",",".");
            }
            }
          }
        },
        customize: (xlsx) => {
          let sheet = xlsx.xl.worksheets['sheet1.xml'];
          //$('c[r^="A"]', sheet).attr('s', '50');
          $('c[r=A1]', sheet).attr('s', '7');
          $('c[r=A3]', sheet).attr('s', '4');
        },
        text: 'Save as Excel',
        messageTop: 'Commercials Analysis',
        sheetName: 'Commercials Analysis',
        title: 'Commercials Analysis',
        extension: '.xlsx',
      }]
    })
</script>