Tuesday, November 30, 2010

How to make a Modal Page (Dialog Page) in the SharePoint 2010

  • (SharePoint JavaScript Modal Framework  )
  • Place a Content Editor Web Part in the page and Switch to the Source Edit Mode in the editor and place the following code by putting your page URL. You can put either relative or absolute URLs.
  • If you are not going to use content editor you can edit the row HTML as well.
  • Put the following script to the page. you can put the code to
  • <script type="text/javascript">
    function OpenDialog(myurl) {
    var options = SP.UI.$create_DialogOptions();
    options.url = myurl;
    // options.width = 500;
    // options.height = 400;
    //options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
    SP.UI.ModalDialog.showModalDialog(options);
    }
    </script>

  •  You can put this code to Additional page header section in yout page.SharePoint will allow to put in that section.
image   

Then you can call as follows.



  • <a onlick=”javascript:OpenDialog(‘/sites/alr/SitePages/Reservation.aspx’)” >Show</a>

This is sample URL I have Put.


image



You can even use for trigger a call back event using the modal frame work. in a later post i will show you how to it. 


this is also sample dialog i have created to display workflow visualization.


image Following are the list of options you can put as dialog options.










































































Property


Data type


Default value


Description


allowMaximise


boolean


true


Determines whether the maximise button is present on the rendered dialog.


args


object

 

We’ll examine this property in more detail later. The args property allows us to pass arbitrary properties into our dialog.


autoSize


boolean (true/false)


true


Determines whether the dialog should be automatically sized to fit within the parent browser window. Where a value has been set for width or height, this value is deemed to be false regardless of the actual setting.


dialogReturnValueCallback


function

 

We’ll examine this property in more detail. By passing a function, we can specify a section of script to be executed when the dialog is closed.


height


numeric

 

The height of the dialog to be displayed. If this value is not set the dialog is automatically sized to fit the window.


html


string

 

Where a Url is passed, an IFRAME tag is rendered pointing to the appropriate Url. AS an alternative to this, it is possible to pass arbitrary HTML instead, in which case, rather than an IFRAME tag, the arbitrary HTML is rendered instead.


showClose


boolean (true/false)


true


Determines whether the close button is visible in the titlebar of the dialog.


showMaximized


boolean
(true/false)


false


Dictates whether the rendered dialog should fill the available space in the parent window.


title


string

 

Specifies the title of the dialog. Where no title is specified, the title of the document referred to by the Url property is used instead.


url


string


null


The url of the page to be shown in the dialog. Where a url is set and IFRAME tag will be rendered by the Dialog framework and the src of the IFRAME will be set to this url.


width


numeric

 

The width of the dialog to be displayed. If this value is not set the dialog is automatically sized to fit the window.


x


numeric

 

Specifies the starting position of the rendered dialog. If this value is not set the dialog is shown in the middle of the viewing area. This value represents the offset from the left edge of the parent browser window.


y


numeric

 

Specifies the starting position of the rendered dialog. If this value is not set the dialog is shown in the middle of the viewing area. This value represents the offset from the bottom of the parent browser window.

How to Link Two List and Create a combine view in the SharePoint 2010

In this way you can join multiple list together and can create a combine view. for an example assume that you are managing a list for some events. And also you are having a participants in separate list. Thus you want to join the two list and create a composite view.

SharePoint 2010 allows you to create this kind of view using  Linked Data Source. in this approach you can create your own custom list in the SharePoint.

How to Create a Linked Data source

Go to SharePoint designer and  go to the link called data sources.

image

And Click the Linked Data Source button in the ribbon. Then SharePoint designer will prompt following kind of a dialog.

In there add two list, that you wan to linked together.

imageimageI'm adding airline schedule and booking list. those are the two list that i wan to merge. then click next. And it will guide you another screen. it will ask you to select either

  • Merge
    • Merge use to combine list which are having same columns definition. for and example we can say this is like a Union operation in the database.
  • Join
    • Join operation use to link two or more lists. this do not need to having a same column definition in the lists. this is equal to join operation in the database.

I need to join the two list to get the passengers for particular schedule. thus  I'm using join option and click finish.

image 

Then switch to the general tab and give some name to identify the data source.

image

Now you are done with the linked data source.

How to create a custom view using linked data source in the SharePoint designer

In here I'm going to create a custom aspx in the SharePoint designer and create a view on it. For that go to SitePages and create new aspx file.

image 

In the designer now you can see a empty aspc file as follows.

image

Now you want to add the data source into the page. There are many ways. Best thing is go to Insert and then select you data source to add data source to the page, But in this way i found that it is not always visible in the data source task pane, Thus you can go to Data View and add your data source.

image

This action will generate a table in the page. But we don't need it. therefore delete it . we will want the data source in the data source task pane. (Select all and press delete in the key board.)

image

now Go to the task data source pane and select the columns you want to add to the page. and click add as a multiple view item.

image

This will generate a table for you. now click the right most column and go to table and add a new column to the right in the table as follows.

image Now place the mouse cursor to the column and select the second list in the data source pane and select the columns you want and click Join Sub View.

image

Then it will ask relation between columns to Join (like foreign key ). In here in link data using ID of the AirLine Schedule.

image

Note : – Some times this Join Sub view not coming. then click two or more columns then this view will come. I don't know why it is happening but it happened to me several times. And in this way i manage to solved the issue.

Now you can see a composite list view in the page that you can use for ..

image

Thursday, November 18, 2010

How to Customize New Item Form to take parameters from Query String in the SharePoint 2010

In here I'm going to explain how to customize the SharePoint Item From to take parameters from Query String and set them as default values using SharePoint designer. Using this you can open a new Item From by providing parameters as query string. For an example you can customize one item Display form and taking query String Parameter from that and view New Item view for another list by providing default values using the Query String.  

Steps

Open the SharePoint designer and go to list and libraries and open the list that you want.

image

Click the New and create a New Insert View by providing the name of the view.

image 

image

Then created one will come to the list. then click and open the view.

image

Then default New Item Screen will be loaded as follows.

image

Then Delete the default list view and make that empty. You can delete the controls by selecting the area in the design view, If it fully cleared you can view the following message from the designer.

image

Then go to SharePoint Controls and add the a Custom List as you want.

image

Then select the New Item Form and click ok to add the view.

image

In My Example I want to set the comments by using Query String Parameter. there for first i change the comments field’s controller to textbox.

image

Then Add parameter field to get the comments form the Query String.

image

I'm passing my comments using query string ID com and it is storing in to the variable param.

 image

Then select the comments text box and switch the view to code or split designer mode,

image

image

In here go and change the text property to {$param} This will set the query string parameter to the text box.

image

Then you done.

image

Wednesday, November 17, 2010

How to get User’s Information in the SharePoint Workflow

image

We can use SharePoint user profiles to get the users information in a SharePoint  workflow. For an example by providing the Users AccountID/Account Name we can get the user’s information.

Thus this will address the questions such as

  • How to get User’s First Name in the SharePoint Workflow
  • How to get User’s Last Name in the SharePoint Workflow
  • How to get User’s Birthday  in the SharePoint Workflow
  • How to get User’s Email in the SharePoint Workflow
  • How to get User’s Manager in the SharePoint Workflow

as well as huge information list that will populated by the user profile service.