0

I´m using a Custom List for our Shift Schedule and i´m coloring some Words for a better Overview:

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$Text = $("td.ms-cellstyle.ms-vb2:contains('Holiday'), td.ms-cellstyle.ms-vb2:contains('Gleitzeit')");
$Text.css({"color": "red", "font-weight": "bold"});
$Text = $("td.ms-cellstyle.ms-vb2:contains('Illness')");
$Text.css({"color": "red", "font-weight": "bold"});
});

</script>

This is working fine for me. (I Think it´s possible to combine Holiday and Illness, but i don´t know how)

I also have the Oncall Shift "Oncall (O)" and i´m trying to only bold the (O). But i have no Idea how i have to change my Code:

$Text = $("td.ms-cellstyle.ms-vb2:contains('(O)')");
$Text.css({"color": "red", "font-weight": "bold"});

In this Case the whole cell is Bold Onall (O)

Do you have any Ideas for me to change only the (O) in the cell?

1

2 Answers 2

0

Get the content (html) from your cell, replace the (O) with something bold... i.e. insert in your code (untested!):

var html = $Text.html();
html = html.replace('(O)', '<span style="color: red; font-weight: bold;">(O)</span>'
$Text.html(html);
0

I would suggest make use of JSLink's postRedering method. That way it should work for paged data. Here's an example (tested :-))

//Namespace: SharePoint Stack Exchange
var SSE = SSE || {};
SSE.ShiftScheduleView = (function () {
    return {
        formatText: function (ctx) {
            var pattern = /Holiday|Gleitzeit|Illness|(\(O\))/ig;

            $("td.ms-cellstyle.ms-vb2").each(function () {
                var html = $(this).html();
                html = html.replace(pattern, function replacer(match) {
                    return '<strong style="color: red">' + match + '</strong>';
                });
                $(this).html(html);
            });
        }
    };
})();

//This function registers our JS with the view rendering.
(function () {
    var templateOverrideInfo = {};
    templateOverrideInfo.Templates = {};

    //This registers our JS to run after the view has been rendered. 
    templateOverrideInfo.Templates.OnPostRender = SSE.ShiftScheduleView.formatText;

    //Specify View & ListTemplated Id  that you want to target.
    templateOverrideInfo.BaseViewID = 1;
    templateOverrideInfo.ListTemplateType = 100;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(templateOverrideInfo);
})();
2
  • thank you very much. This is working fine! is there a way to color an other pattern in Blue. For Example: |Homeoffice| should be colored in lightblue (not in red).
    – Pa Trick
    Sep 14, 2016 at 6:41
  • I would suggest create another function that takes string parameter and return css-safe string, then instead of returning <strong style=...></strong> code above, return something like <span class="shift-sch [css-safe-string-based-on-matched-str]"> + match + </span>. You can then handle style sheet separately. CSS would be something like: span.shift-sch { font-weight: bold } span.shift-sch.holiday, span.shift-sch.illness { color: red; } span.shift-sch.homeoffice{ color: blue; }
    – Aveenav
    Sep 14, 2016 at 18:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.