Example of images and custom columns

In this example, the CAS# column has background images.

These images are centered within the column and right-justified. The Alias 4 column is a computed column. The computed column joins the UOM_CODE and COMPONENT_IND columns. Here is the query that is used to format the output for this example.

SELECT ITEM_CODE,STATUS_IND,MODIFY_DATE,
       CASE ITEM_CODE
           WHEN '01001' THEN '#CFF5F5'
           WHEN 'PK-002' THEN '#F4B8C4'
           WHEN '01003' THEN 'PaleGreen'
           WHEN 'PK-004' THEN 'burlywood '
    END AS F_BG_ITEM_CODE,
       CASE ITEM_CODE
           WHEN '01001' THEN 'F_CSS_CSS1'
           WHEN 'PK-002' THEN 'F_CSS_CSS2'
           WHEN '01003' THEN 'F_CSS_CSS3'
           WHEN 'PK-004' THEN 'F_CSS_CSS4'
       END AS F_CSS_STATUS_IND,
       CASE ITEM_CODE
           WHEN '01001' THEN '#CFF5F5'
           WHEN 'PK-002' THEN '#F4B8C4'
           WHEN '01003' THEN 'PaleGreen'
           WHEN 'PK-004' THEN 'burlywood'
       END AS F_BG_MODIFY_DATE,
       UOM_CODE + ' - ' + CONVERT(varchar, COMPONENT_IND) AS 'UOM_LINE',
       CASE UOM_CODE + ' - ' + CONVERT(varchar, COMPONENT_IND)
           WHEN 'KG - 8' THEN '#CFF5F5'
           WHEN 'EA - 2' THEN '#F4B8C4'
       END AS 'F_BG_UOM_LINE'
FROM FSITEM
WHERE ITEM_CODE IN ('01001','PK-002','01003','PK-004')

Here is the CSS file that is used to format the example.

.F_CSS_CSS1 {

    background: 
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34
AAAAk0lEQVR42mNgAIGYZ9pgmlqONySkWBBFRDzQGl8YmRagAzwiQ1WC44zEAIgNWRaQNhwYi
yh2HBClpBkOLY4IGQJ3kgl1QJskU6SBcQF1WC2ABLGx2ljAdnqBsSCmGfzgPgbFM/FaQFR6
jDzgQgQTwHiz0D8BcoWI1sdFo0bgFgPiDmh2BCIt5KtbrTKHNiWBRAAADlRs74B+btwAAAAAEl
FTkSuQmCC") no-repeat scroll 0 0 transparent;
    background-position: center; 
}

.F_CSS_CSS2 {

    background: 
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAQMAAA
Daua+7AAAABlBMVEUAAACWzCgOA001AAAAAXRSTlMAQObYZgAAACBJREFUeNpjqP//
j+H///8IfBg7/sDAj4JxqUM2C2g2AEArO+9uC62pAAAAAElFTkSuQmCC") no-repeat 
scroll 0 0 transparent;
    background-position: right; 
}

.F_CSS_CSS3 {

    background: 
url('data:image/
png;base64,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
AAASUVORK5CYII=') no-repeat scroll 0 0 transparent;
    padding-left: 25px;
}

.F_CSS_CSS4 {
    background: url("data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA6klEQVR42mNgAIL
4pMz/tMAMtDQcbsmIsOAsEPMDMTMQqwBxKRC/o7YP2hmQAJCvRqwlxFrwD4ij0SypoHYc/
ARiMyQLZMm14CweDUlovnhJjgXcQNyHQ4M8mgVXSLXgO5LmTCD+gyR3hgENAMUekOMDQSQDPIA
4D4g1GbAAoPhVcixIZCASANWKA/E1Ui14CsRy1LIEVzJ9Cw0aIUotIZQP/
gLxDSA+CMQXgPghEOvgseQ2NQq7V0CshcMSK2qVpi+wpSygmCQ1i+vnQKyBZDgrEC+jdn3wDIj
dgZgPiBeN3Bpt8LYsQGYDAC8yGC4djUR0AAAAAElFTkSuQmCC")  no-repeat scroll 0 0 
transparent;
}