2

I have a list called Contact, where I have three fields , 1. Name 2. Mobile 3. Email.

Now I created a Content Editor, Where I will display all the names of the employees. Now how can I create a pop up box (Like the one we will get from this site) to show the Mobile and Email of the selected users.

Thank you for all the help!!

  • Are you using a Content Query Webpart instead of a Content Placeholder? – Daniel Symonds-Lloyd Nov 3 '11 at 6:00
  • @DanielButler I apologize it is Content Editor!! – Jithu Nov 3 '11 at 6:59
  • How are you retreiving the list items so far, is it by the client side object model? – Daniel Symonds-Lloyd Nov 3 '11 at 7:11
  • Currently I created a gridview to get all the list items and show as a visual webpart.. Now here I am asking I will manually add the Employee name (only 5 members) in a Content Editor and on click of each employee can I show his Other details from the list (such as Mobile and Email) in a dialogue / pop up box ? – Jithu Nov 3 '11 at 7:18
5

You probably should use the SharePoint Modal Dialog Framework to display it.

The easiest way would be:

  • Create a view with the fields you would like
  • View an contact from the list, right click and select Properties on the page to obtain the URL
  • Copy the Content ID and fix the URL relative to your page into the following function
  • Modify the page where you are displaying the list of ids with a URL of openContactDialog()

    function openContactDialog(listItemId) {
        var options = {
            url: "../../Lists/Contacts/DispForm.aspx?ContentTypeId=<INSERT ID FOR VIEW HERE>&IsDlg=1&ID=" + listItemId,
            width: 800,
            height: 600,
            title: "Contact Information",
        };
        SP.UI.ModalDialog.showModalDialog(options);
    }
    

To call the function from the GridView, use the following as an example:

<asp:GridView ID="gv" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField HeaderText="Employee">
                <ItemTemplate>
                    <a href="javascript:openContactDialog('<%# Eval("Id") %>');"><%# Eval("Name") %></a>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
  • Thank you for this detailed info, let me try with this. Since I am a very new programmer everything looking so difficult !! – Jithu Nov 3 '11 at 7:20
1

Do you mean popup box = tooltip window? :) There are actually plenty of jquery tooltip plugins, you can use any of them.

  • That was a great link Omlin, However how can I add this to my Content editor webpart? Its like a dialogue box !! – Jithu Nov 3 '11 at 7:00
  • You can edit HTML code in Content Editor WebPart. Search for HTML button on ribbon. – Andrey Markeev Nov 3 '11 at 7:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.