Archive for category JavaScript

Using the HTML Form Web Part to POST a form outside SharePoint (and dealing with WPQ)

Posted by Jake in JavaScript, SharePoint on June 29, 2012

To simplify the form building for users who know HTML, we decided to use the out of the box HTML Form Web Part.  That web part has some limitations.  Specifically, you cannot add or embed another <form> tag to the source code. Without the ability to specify the OnSubmit for the form, there has to be another way to indicate the method and action on the submit of the form.

After searching Google, I can upon this CodePlex project: “SharePoint form submit in content editor web part” and subsequent version 2, which handles the parameters much nicer.

I included the javascript file in my feature so that users could reference it from their HTML.  In the end, the form looks something like this:

<script type="text/javascript" src="/_layouts/Sohema/jquery.SharePointFormSubmit.js"></script>

<div id="divIdForm" class="mode_edit balloon">
 
    <input type=hidden name="myId" value="SOHEMA">
    <input type=hidden name="retURL" value="https://jakejacobsen.net/">

    <label for="first_name">First Name</label><input  id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
    <label for="last_name">Last Name</label><input  id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
    <label for="email">Email</label><input  id="email" maxlength="80" name="email" size="20" type="text" /><br>

    I think this is so:<select id="543645" name="llp" title="I think this is so">
    <option value="">-None-</option>
    <option value="cool">Cool</option>
    <option value="radical">Radical</option>
    <option value="meatball">Meatball</option>
    </select><br>

    <button id="idButton" type="button" class="btn_capsule btn_120 gn align_right" onclick="jQuery().SharePointFormSubmit(
        {
              'element':'#divIdForm', 
              'frmMethod':'post', 
              'frmAction': 'https://test.jakejacobsen.net/servlet/servlet.LLP?encoding=UTF-8',
              'frmTarget':'_self',
              'wpPrefix':'WPQ7'
        })">Submit
    </button>
</div>

There was a small problem with the HTML.  SharePoint handles multiple web parts on a page by prepending the field names with “WPQ#”, where # is some number.  This is fine until the service you are posting to expects the field names to be a specific name. By modifying the jquery, I update the field names using these lines of code in the file jquery.SharePointFormSubmit.js:

var wpPrefix = arr[‘wpPrefix’];

/*…*/

newName = $(this).attr(‘name’).replace(wpPrefix, "");

e.attr(‘name’, newName);

The wpPrefix is the prefix of the web part that is set by SharePoint on that particular page.  This can be found by viewing the page source of the HTML Form Web Part.  In my case, it was “WPQ7.”

The field names are updated on the submit. It is a good idea to view what the form is passing using some HTTP tools.  My favorite is FireFox with the Firebug and Live HTTP Headers Add-Ons.

And there you have it.

2 Comments

Displaying a SharePoint Modal Dialog window from SPGridView

Posted by Jake in .Net, JavaScript, SharePoint on November 4, 2010

I recently built a web part that required a list of announcements with summaries to be presented to a group of users.  Additionally, there was detailed content that was to be displayed in a Pop-up type window.  I used a gridview to display the list, which was pulled in from a web service and passing in a datatable.  That part was rather easy, but the data for the details was stored in a column that contained HTML formed text.  My first thought was to pass that to a javascript function that would call the method for displaying a SharePoint dialog: SP.UI.ModalDialog.showModalDialog();

When I added the HTML as a parameter to the javascript function, the result of doing that was rather odd.  The HTML text was displayed in the web part itself, which was not going to work.  I tried a few workarounds like encoding the HTML text and such, but I did not get good results with that either.  Instead, I knew that I had the ID for the items that I was displaying in the list.  I could pass in the ID to the dialog page and retrieve the HTML text at that point.  Unfortunately, it required two round trips to the web service (and subsequently the SQL Server).

Another issue when displaying the dialog was that the page that I was displaying contained all the elements of the master page that typical pages display (header, footer, etc).  This made the dialog too busy for the simple task it was asked to do.  To fix this, I added the MasterPageFile attribute to the Page directive which overrides DynamicMasterPageFile attribute.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AnnouncementPage.aspx.cs" Inherits="MyPages.WebParts.Layouts.AnnouncementPage" DynamicMasterPageFile="~masterurl/custom.master" MasterPageFile="~/_layouts/applicationv4.master" %>

In the end, a uncluttered summary list and detailed model dialog:

image

image

Code that made it happen:

<script type="text/javascript">
    function OpenDialog(aid) {
        var options = SP.UI.$create_DialogOptions();
        options.url = "/_layouts/MyPages/AnnouncementPage.aspx?announcementId=" + aid;
        options.width = 560;
        options.height = 480;
        options.dialogReturnValueCallback = Function.createDelegate(null, OnCloseDialog);
        SP.UI.ModalDialog.showModalDialog(options);
    }
</script>

<div class="spgridannounce">
    <SharePoint:SPGridView ID="spGridViewAnnouncements" runat="server" AutoGenerateColumns="false"
        ShowHeader="false">
        <HeaderStyle BackColor="Transparent" ForeColor="#08630C" />
        <AlternatingRowStyle BackColor="Transparent" />
        <RowStyle BackColor="Transparent" ForeColor="#BF5629" />
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    Announcement</HeaderTemplate>
                <HeaderStyle />
                <ItemTemplate>
                    <a href='javascript:OpenDialog(<%# Eval("announcement_id")%>)'>
                        <%# Eval("subject") %>
                    </a>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </SharePoint:SPGridView>
</div>

Leave a comment