zoukankan      html  css  js  c++  java
  • Create a “% Complete” Progress Bar with JS Link in SharePoint 2013

    Create a “% Complete” Progress Bar with JS Link in SharePoint 2013

    SharePoint 2013 has a lot new features and functionalities that it can do out-of-the-box. One of these new functionalities is the JS Link web part property. With this property you are able to control the rendering of the web part. This will mostly be used in combination with List View Web Part.

    I see this new functionality to replace the Data View Web Part from SharePoint 2010. No more server side XSLT rendering (XSL Link), but client side JavaScript (JS Link).

    The possibilities are endless, so I'm going to show you a simple and useful example what you can do with this.

    The example I'm going to explain in this post is how you could render the Completed Percentage field of a task as a progress bar.

    Creating a progress bar

    The first thing you need to do is creating a new Task list with a view where the "% Complete" field is shown.

    Task List View

    Task List View

    When you created this list, create a new JavaScript file and call is something like: Task_Complete_Rendering.js

    Paste the following code to your JavaScript file.

    Important: I'm using <#=ctx.CurrentItem.PercentComplete#> to render the % Completed value inside my script.

    Save the file and upload it to the Master Page Gallery (Site Settings > Master pages and page layouts), fill in the required metadata field.

    Upload the JavaScript file

    Upload the JavaScript file

    Now that the file is uploaded to your SharePoint environment, go back to your Task List View you created. Once you are on the page, put the page in edit mode and edit the web part.

    In the web part properties under Miscellaneous you can find the new JS Link property. Fill in the URL to the file like this: ~site/_catalogs/masterpage/Task_Complete_Rendering.js

    You can also use the "~sitecollection" URL token, this one should be used when working with sub-sites.

    Reference the JavaScript file in the JS Link property

    Reference the JavaScript file in the JS Link property

    Store the web part changes and save the page, now you are done. Just refresh the page and you should see the following result.

    Task Progress Bar Result

    Task Progress Bar Result

     

  • 相关阅读:
    Ansible学习 Playbooks_1
    Ansible学习 ad-hoc命令
    Ansible学习 Patterns
    【转】对于SQL SERVER 事务日志已满问题整理
    【转】Apache配置正向代理与反向代理
    【转】Python的IDE和破解Code——pycharm
    【转】SQLServer 数据库变成单个用户后无法访问问题的解决方法
    【转】 尝试在数据库5 中提取逻辑页() 失败。该逻辑页属于分配单元xxx而非xxx
    【Oracle】Oracle版本导入导出问题
    【Java】eclipse导入war包二次开发
  • 原文地址:https://www.cnblogs.com/jindahao/p/3554254.html
Copyright © 2011-2022 走看看