How to change a Title of a wiki page in SharePoint 2013 without affecting its page name and page URL

How to change a Title of a wiki page in SharePoint 2013 without affecting its page name and page URL

Please also see my new post on - Easy Way To Change Wiki Page Title In SharePoint 2013 .

In a SharePoint wiki page, if we would like to change the “Title” of a page, we would have to change the “Page Name” itself. This becomes very irritating because if we want our page title to be named as for example “My Page Title”, this will also rename the page name.

Questions comes how to get rid of it.

There are 2 ways. Both requires some coding.

1. Using SharePoint Designer 2013 and modifying "EnterpriseWiki.aspx"
2. Using JQuery script, in case EnterpriseWiki.aspx is not available

1. Let’s see how we can change the page title of our wiki page using SharePoint designer:

This solution involves two small code changes and a new Authoring habit.

• Open the site in SharePoint Designer 2013, and open this: /_catalogs/masterpage/EnterpriseWiki.aspx

Note: It is a good idea to make a copy of this file somewhere.

• Find the content place holders with IDs PlaceHolderPageTitle and PlaceHolderPageTitleInTitleArea.
• Edit the SharePoint:ListItemProperty  for both content place holders by adding a new property called Property with the value of Title.

• Next, find the SharePoint:FileField control with ID PageNameInEditMode
• Add the following code just below that line:

It should look like this:

• Save and close.

Now the page will display the Title property instead of the Name (i.e., file name). The edit form will show both the Name and the Title (similar to list view edit forms). You can test it by changing the Name of a page and then looking at the displayed Title and tab Title compared to the URL. 

  2.  If you don’t see “EnterpriseWiki.aspx” page, don’t worry, we can add JQuery script to our Wiki page to change the title. Let’s see how this can be done with JQuery:

• Open your Wiki page and click on “Edit Page”
• Add script editor web part and in script editor web part, just add below script:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("#DeltaPlaceHolderPageTitleInTitleArea > span > span > a").text("My Page Title");

    });

</script>

• Save and Close the Edit mode of the page and you will see the title as changed

Hope this will help many of you.

Read More »

Could not find this item in Windows 7

Recently, I was trying to delete a file in my laptop (has Windows 7) which threw an error as "Could not find this item" and was not deleting that file at all.

After searching for sometime, I finally found a solution which helped me in deleting the file.

Here is the solution:

1) Open a Command Prompt.
2) Browse to the folder containing the buggy file.
3) Type 'dir /x' to obtain the 8.3 formatted filename.
4) Delete the file using the 8.3 filename, e.g. 'del 0WELCO~1' (as shown below)

Hope this information may help you and others with the same problem.

Read More »

Open CSV file instead of saving in SharePoint 2013

Usually when we save any CSV file in SharePoint document library and we open it, the browser actually prompts to "Save" the file first and then gives "Open" file option.

How to make some settings so that browser allows CSV files to get "Open" instantly without saving them?

Here is the solution -

In your SharePoint 2013 server, make the settings in “IIS Mime Types” and in “DOCICON” file to open the CSV files from the browser instead of saving them.

Steps to follow are:

a.       Add an entry to DOCICON.XML -

This file is located by default at: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\XML\. Open the file DOCICON.XML for editing and add the following line in the ByExtension element:

b.      Change the MIME type associated with the CSV Extension in Internet Information Server (IIS)

To do this:

                                                               i.      Run the “Internet Information Services (IIS) Manager” application from the Start/Administrative tools menu.

                                                             ii.      Select the server in the left-hand pane.

                                                            iii.      Select “MIME Types” in the list of options in the middle pane.

                                                           iv.      Then locate the .CSV entry (it should already exist) and change the MIME type to: application/vnd.ms-excel, and click OK.

Finally, most importantly, reset the IIS by clicking on Start -> Run -> cmd -> Type "IISReset"

For more reference, check these posts as well:

https://nickgrattan.wordpress.com/tag/csv-sharepoint-mime/

http://www.revium.com.au/articles/sandbox/sharepoint-default-file-action/

Read More »

Implementing Autocomplete Textbox in SharePoint

Implementing Autocomplete TextBox in SharePoint

In my recent project activity, I got a requirement to fill the textbox with autocomplete functionality. After some research and struggle, I was able to achieve it.

The best thing about the solution I created is, it is cross browser compatible. I have tested it in Chrome and Internet Explorer.

What is autocomplete?

Autocomplete means when user starts typing the characters in a textbox, just below the textbox, user sees the suggestions. The best example is google search textbox. When you enter any text in the google search textbox, it starts showing you the suggestions of a thing you are looking for.

How to achieve it in SharePoint Visual Web Part?

To achieve it, you should use JQuery and SPServices in your SharePoint solution.

• In JQuery, there is an autocomplete functionality available. For more information, please refer to this link - http://jqueryui.com/autocomplete/.

• To know more about SPServices, refer to this link - http://spservices.codeplex.com/.  

The way to achieve it via JQuery and SPServices is:

Let’s say you have created a Visual Web Part in SharePoint and you have a textbox in your web part which you want to make as an autocomplete textbox. Now, this textbox should show the suggestions coming from your custom list named as “Items” and the column which it should target in your custom list is “ItemNumber”.

Just put below lines of code in your Visual Web Part’s “ascx” file, change the list name and the column name as per your need and you will be good to go:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        var itemSource = [];

        var k = 0;

        $().SPServices({

            operation: "GetListItems",

            async: false,

            listName: "Items",

            CAMLViewFields: '',

            CAMLQuery: '',

            completefunc: function (xData, Status) {

                $(xData.responseXML).SPFilterNode("z:row").each(function () {

                    itemSource[k] = $(this).attr('ows_ItemNumber');

                    k = k + 1;

                });

                $('#<%=txtAutoComplete.ClientID%>').autocomplete({

                    source: itemSource,

                    minLength: 0

                });

            }

        });

    });

</script>

<asp:TextBox ID="txtAutoComplete" runat="server"></asp:TextBox>

So what we have done here is:

Have given reference to the:

͐   JQuery UI js file

͐   JQuery js file

͐   Autocomplete js file

͐   SPServices js file

Have used JQuery variable as “itemSource” as an array to store the column values we will get from the custom list

Have used JQuery variable as “k” to keep the track of current item index

Under “SPService” function have used:

͐   Operation as “GetListItems” as we want list items from the list

͐   Kept async as false

͐   Used listName as “Items” and column name as “ItemNumber”

͐   Defined CAMLViewFields and CAMLQuery

Once the parameters provided above matches and gets validated, the “completeFunc” will be executed which will:

͐   Go through the “z:row” as it will hold the values returned by the SPService

͐   Add the provided column name to the array

͐   Index value will be increased by 1

Once “completeFunc” gets executed, the textbox will be used to bind the data to its datasource which we have in an array i.e. “itemSource”

Hope this helps!

Read More »

How to Hide RadEditor Toolbar

How to Hide RadEditor Toolbar 

Requirement

No doubt that “Telerik” controls are very useful and they have so much to offer but sometimes there are few things which “Telerik” doesn’t provide to meet our requirement purpose. Hiding “RadEditor” control toolbar is one of them. “RadEditor” control doesn’t comes with any property to hide its toolbar.

Solution

So what’s the solution to hide “RadEditor” control toolbar? Solution is to hide it through a "CSS" class.

How?

On your page where you are using “RadEditor” contorl or in a “CSS” file which you are referring in your page, you can put below line of code to hide it:

<style type="text/css">

    .reToolbarWrapper

    {

        display: none;

    }

</style>

 

That should do it!!

Read More »

Limit Number of Characters in TextArea via JQuery

About: In this example we will see how to limit number of characters to be entered in a HTML textarea. To know more about textarea tag, click here.

Pre-requisites:

1. Knowledge of HTML
2. Knowledge of JQuery

Introduction: So many times in our application we have to use comment textbox or textarea. In this comment textbox, user can add their comments/views/feedback.
What if we would like to have limited number of characters that users can add in them? For that purpose we can use JQuery as a solution.

Solution:

HTML Code -  Add the following code under body tag of your HTML:

   <span id="remaining">100</span> characters remaining.

    <br />

   <textarea></textarea>

JQuery Code - Add the following code under document.ready function in JQuery:

var maxchars = 100;

        $('textarea').keyup(function () {

            var textAreaLength = $(this).val().length;

            $(this).val($(this).val().substring(0, maxchars));

            textAreaLength = $(this).val().length;

            remaining = maxchars - parseInt(textAreaLength);

            $('#remaining').text(remaining);

        });

Conclusion: You will see that on top of textarea, the number of characters decreases when you enter any character in a textarea. You will also notice that once it reaches zero (0), it will not accept further characters in a textarea.

Note: If you are changing the value of variable "maxchars", don't forget to change the same in span tag. :)

Read More »

Convert Image To Bytes and Read It Via JQuery

Convert Image To Bytes and Read It Via JQuery

Today, I got a requirement to work on a task on how to convert an image (can be in any format i.e. png, jpg etc.) to array of bytes and then read that image via JQuery.

After some mind exercise, I finally found the solution and wanted to share with you so that you can save much of your precious time in case you don't know how to achieve it.

Note: There can be lots of ways to achieve it but I found this way as the easiest.

Here is the pre-requisite:
1) You would need "NewtonsoftJson" dll file. You can get it from here - http://james.newtonking.com/json. After downloading it, just add the "dll" and it's reference to your Visual Studio solution as "
using Newtonsoft.Json;".
2) You would need JQuery library reference. 
3) Knowledge of C# and JQuery.

4) Have an image tag in your HTML and don't set its "src" i.e.
<img id="img1" src="" alt="image" /> 
Once, you have all the pre-requisites, add the below line of code in your ".cs" file:

[WebMethod]

public static string ConvertingToBytes()

{  try

{  System.Drawing.Image img = System.Drawing.Image.FromFile(@"D:\Projects\pics\SampleImage.jpg");

byte[] byteArray;

using (MemoryStream memoryStream = new MemoryStream())

{  img.Save(memoryStream, System.Drawing.Imaging.ImageFormat.Jpeg);

byteArray = memoryStream.ToArray();  string json = JsonConvert.SerializeObject(byteArray);

return json;

}

}  catch

{  return null;

}

}

And the below line of code in your ".aspx" file:

function ConvertToImage() {

$.ajax({  type: "POST",

url: "default.aspx/ConvertingToBytes",

data: "{}",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (msg) {

alert("success");

if (msg.d != null) {

msg.d = jQuery.parseJSON(msg.d);  var imageSrc = "data:image/jpg;base64," + msg.d;

$('#img1').attr('src', imageSrc);
                      

}

},  error: function (msg, status, errorthrown) {

alert(msg.toString() + "-" + status + "-" + errorthrown);



}

});

}

Call this JQuery method in your button click event or whatever way which will suit your requirement.

$("#Btn1").on("click", function (event) {


event.preventDefault();

ConvertToImage();

});  

You will be good to go.

 Note: You can now see the source code of your page, it will show your image's src in a byte format.

Read More »