Change the width of SharePoint:FormField elements

Ever want to change the width or height of a particular field or text box on a SharePoint form using SharePoint Designer?  If you have looked around you will realize it’s not the most obvious of solutions.

If you would like to change the size of all the elements on a page you can simply add a content editor with the following:

<style>
.ms-long{ width:100px; }
</style>

However if you want to get granular its a bit more involved.  You need to place the SharePoint:FormField element inside of a DIV and assign it an ID as shown below:

Once you have all of your fields inside of uniquely ID’ed DIV’s we can use CSS to select only the .ms-long classes within those elements.  Example:

<style>

#container1 .ms-long{ width:25px; }

#container2 .ms-long{ width:25px; }

#container3 .ms-long{ width:35px; }

</style>

Easy enough, and covered in part other places but hopefully this will save some time if anyone runs into my problem again.

Advertisements

SharePoint 2013 list column title modification with javascript

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     OnPreRender: function(ctx) {

        var field = getFieldByDisplayName(ctx,"Task Name"); 
        if(field)
            field.DisplayName = "Task Name:::"; 
     }
   }); 

});


function getFieldByDisplayName(ctx,name)
{
    var result  = ctx.ListSchema.Field.filter(function(f){return f.DisplayName == name;} ); //find field by display name
    return result.length > 0 ? result[0] : null;
}

VBA Macro for save PFD ( Workbook, Single sheet)

Hi,

This VAB code is using to save your workbook too.pdf format.

 

Save all sheets to PDF
Sub ExportToPDFs()

' PDF Export Macro

' Change C:\Exports\ to your folder path where you need the diles saved

' Save Each Worksheet to a separate PDF file.

Dim strTime As String

Dim strFile As String

Dim strName As String

Dim ws As Worksheet

strName = "Test"

strTime = Format(Now(), "yyyy_MM")

strFile = "_" & strTime & ".pdf"

For Each ws In Worksheets

ws.Select

nm = ws.Name

ActiveSheet.ExportAsFixedFormat Type:=xlTypePDF, _

Filename:="D:\" & nm & strFile, _

Quality:=xlQualityStandard, IncludeDocProperties:=True, _

IgnorePrintAreas:=False, OpenAfterPublish:=False

Next ws

End Sub
Save Workbook to PDF
Option Explicit

Public Sub Example()

Dim strTime As String

Dim strFile As String

Dim strName As String

strName = "Test"

strTime = Format(Now(), "yyyy_MM")

strFile = strName & "_" & strTime & ".pdf"

ThisWorkbook.ExportAsFixedFormat _

Type:=xlTypePDF, _

Filename:="D:\" & strFile, _

Quality:=xlQualityStandard, _

IncludeDocProperties:=True, _

IgnorePrintAreas:=False, _

OpenAfterPublish:=True



End Sub

Get Current User in Group

https://…/SiteAssets/Js/jquery.min.js

$(document).ready(function (){ getCurrentUser(); });

function getCurrentUser() { $.ajax({ url: _spPageContextInfo.webAbsoluteUrl + “/_api/web/CurrentUser”, method: “GET”, headers: { “Accept”: “application/json; odata=verbose” }, success: function (data) { getCurrentUserGroupColl(data.d.Id); }, error: function (data) { failure(data); } }); }

function getCurrentUserGroupColl(UserID) { $.ajax ({ url: _spPageContextInfo.webAbsoluteUrl + “/_api/web/GetUserById(” + UserID + “)/Groups”, method: “GET”, headers: { “Accept”: “application/json; odata=verbose” }, success: function (data) { /* get all group’s title of current user. */ var results = data.d.results; var InnrHtmlgrp = ” “; for (var i = 0; i < results.length; i++) { InnrHtmlgrp += ” ” + results[i].Title + “”; } $(“#Group”).append(InnrHtmlgrp + “”); } }); } security Group Name:

Top Navigation Styles in SharePoint 2013

Modify the master page

  • Add a link to Custom Css in master page.
  • On the head tag of master page html add below highlight lines
<!–SPM:<SharePoint:CssRegistration Name=”Themable/corev15.css” runat=”server”/>–>
<!–SPM:<SharePoint:CssRegistration Name=”https://portal.sharepoint.com/Style Library/Master.css” runat=”server” After=”corev15.css” />–>

  • In your Custom master.css file, add the below CSS classes
 .ms-breadcrumb-top {  
  background-color:#5482AB;  
 }  
 .ms-core-listMenu-horizontalBox {  
 background-color:#5482AB;  
   padding: 0px;  
   margin: 0px;  
   padding-left: 10px;  
   color: #ffffff;  
 }  
 .ms-core-listMenu-horizontalBox li.static {  
  color: #ffffff;  
 }  
 .ms-core-listMenu-horizontalBox li.static a:hover{  
  color: #ffffff !important;  
 }  
 .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {  
   color: #ffffff;  
    white-space: nowrap;  
    border: 1px solid transparent;  
    padding: 6px 10px;  
    line-height: 20px;  
    height: 20px;  
    font-size: 10pt;  
    font-weight:bold;  
    font-family:Arial, Helvetica, Sans-Serif;  
    margin-right:5px;  
 }  
 .ms-core-listMenu-horizontalBox li.static span.static {  
 }  
 .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover {  
   text-decoration: none;  
    background-color:#D95E00;  
    background-image:none;  
 }  
 .ms-core-listMenu-horizontalBox li.selected a.selected {  
   text-decoration: none;  
    background-color:#D95E00;  
    background-image:none;  
 }  
 ul.dynamic {  
  background-color:#f7f7f7;   
  border:1px solid #b8babd;  
  padding:0px;  
 }  
 ul.dynamic .ms-core-listMenu-item {  
  background-color:#f7f7f7;  
  line-height:20px;  
  font-size: 9pt;   
  font-weight:normal;   
  color:#333;  
  font-family:Arial, Helvetica, Sans-Serif !important;  
  padding:5px;  
 }  
 ul.dynamic .ms-core-listMenu-item:hover {  
    color:#ffffff;  
    background-color:#D95E00;  
 }  
 .ms-listMenu-editLink  
 {  
   display:none !important;  
 }  
  • ms-listMenu-editLink  class is for edit Links button.

Quick launch (Left navigation) styles in SharePoint 2013

Modify the master page

  • Add a link to Custom CSS in the master page.
  • On the head tag of master page html add below highlight lines
<!–SPM:<SharePoint:CssRegistration Name=”Themable/corev15.css” runat=”server”/>–>
<!–SPM:<SharePoint:CssRegistration Name=”https://portal.sharepoint.com/Style Library/Master.css” runat=”server” After=”corev15.css” />–>

  • In your Custom master.css file, add the below CSS classes
 .ms-core-listMenu-verticalBox UL.root > LI > .menu-item{  
  font-weight:bold;  
  background-color:#5482AB;  
  color:#ffffff;  
  border-bottom-color:#ffffff;  
  border-bottom-style:solid;  
  border-bottom-width:1px;  
  min-height:25px;  
  padding-top:5px;  
  padding-left:10px;  
  font-size:12px;  
  font-family:Arial, Helvetica, Sans-Serif !important;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li.static > a:hover {  
   color: #ffffff !important;  
   background-color:#D95E00 !important;  
   text-decoration:none;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li.selected > a {  
    background-image:none;  
    background-color:#D95E00;  
   color:#ffffff !important;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li > a:hover {  
    background-image:none;  
    background-color:#D95E00;  
   color:#ffffff !important;  
   text-decoration:underline;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a {  
  font-size:12px;  
  padding-left:10px;  
  font-family:Arial, Helvetica, Sans-Serif !important;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a.selected {  
   background:none;  
    color: #D95E00 !important;  
   background-color:#ffffff !important;  
    text-decoration: none;  
    border: 1px #fff solid;  
    font-weight:bold;  
 }  
 .ms-core-listMenu-verticalBox a.selected  
 {  
  border: 1px #fff solid !important;  
 }  
 .ms-core-listMenu-verticalBox UL.root UL  
 {  
  margin:0px 0px 10px 0px !important;  
 }  

SharePoint Designer Workflow vs Microsoft Flow

Every organization who has implemented SharePoint must have used workflows to automate their business process. Microsoft provides various options for creating workflows, here we will check SharePoint Designer Workflow vs Microsoft Flow.

There are different ways to create workflows in SharePoint like:

  • Using Out of box workflow
  • Using SharePoint designer workflow 2013
  • Using Visual Studio
  • Using 3rd party tool

And Microsoft has introduced Microsoft Flow in Office 365.

Here we’ll discuss the differences between SharePoint Designer and Microsoft Flow which will help out to give the solution for your organization needs.

SharePoint Designer Workflow vs Microsoft FlowSharePoint Designer Workflow vs Microsoft Flow

SharePoint Designer Workflow

SharePoint Designer Workflow is an automated business process which is used for automating your business activities. By using designer workflow you can assign a task or work to a Group or a single person. After assigning the task to a group or a single person, We can track that current task status to know whether it is progressing or not.

Designer workflows are very much popular among developers. If out of the box workflows does not suites your business requirements, you can develop a workflow using SharePoint designer 2013 and deploy to SharePoint sites. We can use designer workflows in SharePoint online as well as on-premise versions of SharePoint.

Microsoft has not released any new versions of the SharePoint designer after SharePoint designer 2013, no new designer for SharePoint 2016, SharePoint 2019 or SharePoint Online. In workflow architecture also, there are not many changes for any version. Rather Microsoft has invested heavily on Microsoft Flow to provide an alternative to designer workflows (this is not officially announced by Microsoft, but has been assumed based on the functionality provided in Microsoft flow).

Microsoft Flow

In the previous year, Microsoft has introduced the Flow which is a good and also a new productivity app to the SharePoint Online Office 365. Microsoft Flow is nothing but a service which helps to create an automated workflow for your business needs. This Microsoft Flow is a replacement to SharePoint Designer. That means, Instead of Designer Workflow, Now we can simply create a Microsoft Flow and we can use it as per our requirement. Microsoft Flow is basically used to allows users to create cross-application workflows.

According to Microsoft “Microsoft Flow is a service that helps you create automated workflows between your favorite apps and services to synchronize files, get notifications, collect data, and more”.

Microsoft Flow will help you to communicate with various apps and services. The good thing of this Flow is you can develop Microsoft Flow without developer knowledge. Let’s take an example.

Suppose in an organization, you are a manager or some senior employee like the Business analyst and also not a SharePoint developer. If you want to make some automated task, then you have to wait for the developer to create a workflow using the SharePoint Designer. But as of now, Microsoft has released the Microsoft Flow, so you don’t have to wait for the developer to create a workflow. Now you can use this Microsoft Flow to create the workflow very easily because it has a very simple graphical user interface.

Previously, We were very much familiar with the SharePoint Designer and now Microsoft Flow is the replacement instead of the Designer Workflow. So we looked into the pros and cons of Flow and below is that what we searched:

SharePoint Designer Workflow Vs Microsoft Flow

Microsoft Flow has lots of advantages over SharePoint Designer workflows.

  • You can develop simple to complex workflows using SharePoint designer 2013 but you need developer knowledge to develop workflows using SharePoint designer 2013 for list or libraries.
  • Lots of workflow actions presented in SharePoint designer but all the actions are specific to SharePoint only. You need development knowledge to communicate various services from SharePoint designer. But using Microsoft Flow we can very easily communicate with various services.
  • On the other hand, a Power user or even an end user can create and use Microsoft Flow in SharePoint online.
  • But on the other hand, Microsoft Flow is not particular to SharePoint, you will be connected to various services like Twitter, Dropbox, OneDrive, Facebook, Slack, Instagram etc. You do not need any developer knowledge to create any flow, power users or even end users can easily create Microsoft Flow easily.
  • Microsoft Flow is tightly integrated to SharePoint Online but it is not only used for SharePoint.
  • In Microsoft Flow, lots of predefined templates are available to use. Either you can use the template or you can create a flow from scratch.

As an organization, if you are using Office 365 SharePoint Online, then you should use Microsoft Flow to automate your business processes rather than using SharePoint designer workflows.

CSS Challenge Response: Simple styles for SharePoint list

Please find the below links and code to change the  styles in SharePoint list

https://blog.sharepointexperience.com/2012/05/16/simple-styles-sharepoint-list/

---------- Table Rows ----------*/
    ms-vh-div,ms-vh2-nofilter,ms-vh-div{
        background: #2E4C70;
    }
/* Set background for every row */
    .ms-listviewtable > tbody > tr {
        background: white;
    }

 Set border for every row */
    .ms-listviewtable > tbody > tr td{
        border-bottom: 1px solid #AFAFAF !important; /* !important needed over override SharePoint inline style */
    }

 Set background for every alternating row */
    .ms-listviewtable > tbody > tr.ms-alternating {
        background: #E2E3E5;
    } Table Header Row 
 Remove background set in SharePoints general data table style */
    .ms-listviewtable tr.ms-viewheadertr {
        background: transparent;
         width:100%;
    }

.ms-viewheadertr,
    .ms-listviewtable {

width:100%;
}tr.ms-viewheadertr > th.ms-vh2-nograd {   color:white;}

 Modify background color */
 tr.ms-viewheadertr > th.ms-vh2-nograd,
    tr.ms-viewheadertr > th.ms-vh-icon, /* Input box and attachment icon */
    tr.ms-viewheadertr > th.ms-vh, /* Text */
    tr.ms-viewheadertr > th.ms-vh2 ,
    tr.ms-viewheadertr >th.ms-vh2-nofilter,
    tr.ms-viewheadertr >th.ms-vh-div/* Text */ {
        background: #2E4C70;
    }
.ms-viewheadertr {

width:100%;
}


 Modify background color on hover */
    tr.ms-viewheadertr > th.ms-vh:hover,
    tr.ms-viewheadertr > th.ms-vh2:hover {
                background-color: #273C51;
                border-color: #273C51;
        }

 Modify font color */
    .ms-viewheadertr a,
    .ms-viewheadertr div {
        color: grey;
    }

 Modify font color on hover */
    .ms-viewheadertr a:hover,
    .ms-viewheadertr div:hover {
        color: blue;
    }

 

Doc Open New Tap in SP

Below code to open doc in new tap in SP 2013.

$(document).ready(
function ()
{
// has to be on an interval for grouped doc libraries
// where the actual links are loaded only once a group
// is expanded
setInterval(
function ()
{
$(“a[onclick*=’return DispEx’][target!=’_blank’]”)
.attr(“target”, “_blank”)
.removeAttr(“onclick”);

// document type icons
$(“td.ms-vb-icon>img[onclick]:not([documentUrl])”)
.click(function (e)
{
window.open($(this).attr(“documentUrl”), “_blank”);
e.stopPropagation();
e.preventDefault();
return false;
})
.each(function ()
{
$(this).attr(
“documentUrl”,
$.trim(String($(this).attr(“onclick”))
.split(“=”)[1]
.replace(/[“‘{}]/g, “”)
.split(“;”)[0])
);
this.onclick = null;
});
},
500
);
}
);

Display a Task List on a Master Calendar

Display a Task List on a Master Calendar

1. From your SharePoint site, open your master Calendar, in this example I will open my “Team Calendar.”

2. At the top of the page click CALENDAR to expand the ribbon.

3. In the Manage Views section click Calendars Overlay.

4. On the Calendar Overlay Settings page click New Calendar.

5. In the Name and Type enter the following:

  • 1.Calendar Name: Internal Tasks
  • 2. The type of calendar is: SharePoint


6. In the Calendar Overlay Settings section enter the following information below:

  • 3. Description: Blank
  • 4. Color: Dark Green, #134029
  • 5. Web URL: (locate the site where your task list resides) click Resolve
  • 6. List: (select the task list you would like to display) Team Tasks
  • 7. List View: Calendar
  • 8. Always show: unchecked


7. Review your settings and click OK.

8. Under Additional Calendars you will see your new calendar overlay, which in this example is “Internal Tasks.”

9. Click OK.
10. You will now see items from your task list, in this example “Team Tasks” showing on the master calendar.