Search by Artist ? HTML

Rafael Hi, I can only guess without the complete code. Here it is.

let vRaiting := "minRt: " + text('min. Raiting') + "| maxRt: " + text('max. Raiting');
let vRtMin := 'min. Raiting';
let vRtMax := 'max. Raiting';

+++
let myFilter := trim(this."YourArtistSearchFieldName");
let hasFilter := if length(myFilter) > 0 then true else false end;
+++

let myObject := do as server
        ((select Albums) order by Name)['RYM Raiting' >= vRtMin]['RYM Raiting' <= vRtMax].{
            nid: raw(Id),
            name: Name,
            title: Title,
            tracks: Tracks,
            rym: 'RYM Raiting',
            type: text(Type),
            format: text(Format),
            brc: BarCode
        }
    end;

+++
let myDisplayObject := if hasFilter then
    myObject[name = myFilter];
else
    myObject;
end;
+++

let content := "
<style>
.grid-container {
    display:grid;
    /*hier kann die Spaltenanzahl festgelegt werden*/
    grid-template-columns:repeat(auto-fill, minmax(20em, 1fr));
    grid-gap:5px;
}
.gridFormat, .gridHeader, .gridHeader1{
    font-size:large;
    text-align:center;
    border-radius:.5em;
    padding:1em;
    box-shadow:4px -4px 7px DimGray inset;
    color:black;
}
.gridHeader {
    grid-column: 1 / -4;
    background:Silver;
    font-size:x-large;  }
.gridHeader1 {
    grid-column: 1 / -1;
    background:Silver;
    font-size:x-large;  }
.gridOne {background-color:#b0aac0;}
.gridTwo {background-color:#ddeedd;}
.gridThree {background-color:#c2d4dd;}
.gridFour {background-color:#AD5C62;color:black;}  table{
    width:100%;
}
.tableFixHead {
    overflow-y: auto;
       height: 528px;
        width: 1200px;
      }
.right {
    text-align: right
}
.center {
    text-align: center
}
th {
    font-size:small;
    padding: .5em .5em .5em .5em;
    border-radius: .5em .5em .5em .5em;
}
td{
    font-size:small;
    background-color: #ddeedd;
    padding: .1em .5em .1em .5em;
    text-align: center;
    border-radius: .5em .5em .5em .5em;
}
button{
    font-size:small;
    background-color:#FAFAFA;color:black;
    padding: .1em .5em .1em .5em;
    text-align: center;
    border-radius: .5em .5em .5em .5em;
}
thead,tfoot{
      background-color:#ddeedd;
    position: sticky;
    font-size:small;
}
thead {
    top: -.2em;
    text-align:center;
}
tfoot{
      bottom: -.2em;
}
tr:nth-child(odd) td{ /*ungerade Zeile einfärben*/
      background-color: #b0aac0;
}
p {
    visibility: hidden
}  </style>
<aside class = 'grid-container'>
<header class = 'gridFormat gridTwo gridHeader1'>
<div class='tableFixHead'>
<table>
    <thead>
        <tr>
            <th> Artista </th>
                        <th> Album </th>
                        <th> Tracks </th>
                        <th> Raiting </th>
                        <th> Type </th>
            <th> Format </th>
                        <th> Barcode </th>
                        <th> ➔ Go </th>
        </tr>
    </thead>
    <tbody>";
let mitte := for i in myDisplayObject do
        "<tr>
            <td  style=background-color:> " +
        i.name +
        " </td>
            <td  style=background-color: >" +
        i.title +
        " </td>
            <td  style=background-color: >" +
        i.tracks +
        " </td>
            <td  style=background-color: >" +
        i.rym +
        " </td>
            <td  style=background-color: >" +
        i.text(type) +
        " </td>
            <td  style=background-color: >" +
        i.text(format) +
        " </td>
            <td  style=background-color: >" +
        i.brc +
        " </td>
            <td style=background-color:" +
        ---
                border="" ">
            <button onclick="ui.popupRecord('{ i.nid }')">{ "Album " }</button>
        --- +
        " </td>
        </tr>"
    end +
    "</header>
  </div>
<tfoot>
    <tr>
             <th style = text-align:center># " +
    cnt((select Albums)['RYM Raiting' >= vRtMin]['RYM Raiting' <= vRtMax]) +
    "</th>
             <th style = text-align:left scope='colgroup' colspan='7' ><sub></sub> " +
    "</th>
    </tr>
    </tfoot>
</div>
</body>
</html>

I can't color code specific lines of code so I have added two sections between +++. Add those and change...

let mitte := for i in myObject do

to

let mitte := for i in myDisplayObject do

Rafael Try single quotes with the Search by Artist field. You used double quotes. I know, my example used double quotes.

Hi Rafael , your code is filtering the data, but then still using the original, unfiltered data to generate the HTML table.

From your original code, you need to replace:

…
let myObject := do as server
        ((select Albums) order by Name)['RYM Raiting' >= vRtMin]['RYM Raiting' <= vRtMax].{
…

With this:

…
let vArtist := trim(text(this.'Search by Artist'));
let myObject := do as server
        ((select Albums where 'RYM Raiting' >= vRtMin and 'RYM Raiting' <= vRtMax and name like vArtist) order by Name).{
…

This is then filtering the Albums, in the first step, before bringing them back to the code.

Please let us all know if this works for you.