Button color - user defined on list item creation

Question

I have created a SharePoint 2013 list and added items to it. These items are used in a carousel and displayed on the homepage. I also have a title, text and a button. On the frontend side I use knockout.js

Users are able to set the color of the text on the carousel on creation of the list item. Now I created the same functionality for the button but it just doesn't take the color I'm passing through when creating the list item.

I can, however, see the colour on the developer tool being populated on the field but it's just not being displayed on the browser.

This is the code I'm using:

//HTML binding:
<a data-bind="attr: { href: CampaignLink().Url, target: CampaignTarget(), style: { color: ButtonColor() }" class="btn">Read More   </a>

//js: querying the list
self.api_query = get_slm_URL_Intranet() + "/_api/web/lists/GetByTitle(\'" + self.slm_LIST_Carousel_Title + "\')/GetItems(query=@v1)?@v1={\"ViewXml\":\"<View><ViewFields><FieldRef Name='Id'/><FieldRef Name='Location'/><FieldRef Name='ButtonColor'/></ViewFields><Query><OrderBy><FieldRef Ascending='TRUE' Name='SortOrder'/></OrderBy><Where><And><And><And><Geq><FieldRef Name='DisplayEndDate'/><Value Type='DateTime'><Today/></Value></Geq><Leq><FieldRef Name='DisplayStartDate'/><Value Type='DateTime'><Today/></Value></Leq></And><Eq><FieldRef Name='_ModerationStatus'/><Value Type='ModStat'>0</Value></Eq></And>{0}</And></Where></Query><RowLimit Paged='FALSE'>6</RowLimit></View>\"}";  

//creating observable:
self.ButtonColor = ko.observable();

// Populate Mapped Item
self.populateCampaignEntry = function (cbuttoncolor) {
    try {
        obj = new doCarousel();

        //Check for new tab
        var newTab = String.HasHashParam(clink.Url, slm_URL_NewTab);
        if (newTab) {
            clink.Url = String.RemoveHashParam(clink.Url, slm_URL_NewTab);
        }

        // map fields


        obj.ButtonColor(cbuttoncolor);

        self.dataArray.push(obj);
    } catch (err) {
        console.log("Error: ViewModelCarousel.populateCampaignEntry: " + err);
    }
}


//Loading data
self.loadData = function () {
    // get ISO date in query
    //date = new Date();
    //isoDate = date.toISOString();

    var companyFilter = "<IsNull><FieldRef Name='Company'/></IsNull>";
    if (self.userCompany) {
        companyFilter = String.format("<Or><Eq><FieldRef Name='Company'/><Value Type='TaxonomyFieldType'>{0}</Value></Eq><IsNull><FieldRef Name='Company'/></IsNull></Or>", self.userCompany);
    }

    var q = self.api_query.replace("{0}", companyFilter);

    self.spAJAXpostJSON(q)
        .success(function (data) {
            var d = data.d.results;
            $.each(d, function (index, result) {
                self.populateCampaignEntry(result.ButtonColor);
            });
            self.FinishedLoading();
        })
        .error(function (jqxr, errorCode, errorThrown) {
            console.log("Error: ViewModelCarousel.loadData*error: " + errorThrown);
            self.FinishedLoading();
        });
}

Answer 1

Change the color through Mater Page or use "!important" at the end of your code where you are changing the color.