Sharepoint 2013: Override display for App web part

My current project requires some custom CSS with the minimum amount of customisation. Instead of writing a stack of custom controls, we can 'intercept' the apps as they are being rendered and change their CSS at runtime.

The following is a sample of how this might look (I called my file blah.js):

(function () {
    var overrideContext = {};
    overrideContext.Templates = {};
    overrideContext.Templates.Header = "<div class='myheader'>";
    overrideContext.Templates.Footer = "</div>"
    overrideContext.Templates.Item = customItem;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

function customItem(ctx) {

    return '<div class="myheadercss"><h1>'+ctx.CurrentItem.Title+'</h1></div>'+
           '<div class="mycontentcss"><img class="myimagecss" src="'+ctx.CurrentItem.Image0+'" alt="Image" />'+
           '<h2>'+ctx.CurrentItem.Header0+'</h2><p class="mytextcss">'+ctx.CurrentItem.Content1+' <a href="'+ctx.CurrentItem.Link0+'" class="mylinkcss">Read More</a></p></div>'
}

I placed my .js file in masterpage/scripts, so in the 'Miscellaneous' section of the webpart properties, I can put a link to my file:

~sitecollection/_catalogs/masterpage/scripts/blah.js


Comments

Post a Comment

Popular posts from this blog

SharePoint 2013: Error updating managed account credentials

I encountered the following message when trying to change a password for a managed account: Error deploying administration application pool credentials. Another deployment may be active. An object of the type Microsoft.SharePoint.Administration.SPAdminAppPoolCredentialDeploymentJobDefinition named "job-admin-apppool-change" already exists under the parent Microsoft.SharePoint.Administration.SPTimerService named "SPTimerV4".  Rename your object or delete the existing object. The error message is self explanatory - Rename your object or delete the existing object.  I choose the latter. Powershell to the rescue. $job = Get-SPTimerJob -Identity "job-admin-apppool-change" $job.Delete() Reset the password and all should be good.
Read more

How can I call a JIRA api through Powershell?

 Navigate to https://id.atlassian.com/manage-profile/security/api-tokens and create an API token Then use the following code: $pair = "me@example.com:<My token here>" $bytes = [System.Text.Encoding]::ASCII.GetBytes($pair) $base64 = [System.Convert]::ToBase64String($bytes) $basicAuthValue = "Basic $base64" $headers = @{ Authorization = $basicAuthValue } $json = Invoke-RestMethod -Uri "https://<mydomain>.atlassian.net/rest/api/3/search?jql= <jql here>" -Method Get -Headers $headers
Read more