Microsoft Content Management Server Development : A Placeholder Control for Multiple Attachments (part 3) - Reusing the Insert Attachment Dialog

3. Deleting Attachments

To delete attachments, we will write a client-side function that clears the contents of the textboxes, table cells, and hidden form field for the selected attachment. Add the RenderDeleteAttachmentJavascript() helper function to the code.

private void RenderDeleteAttachmentJavascript()
{
  StringBuilder script = new StringBuilder();

  // Get the name of the placeholder
  string sPhName = this.BoundPlaceholder.Name;

  script.Append("<SCRIPT>");
  script.Append("function DeleteAttachment(i)");
  script.Append("{" + crlf);
  script.Append("eval('document.all.MAPH_AttIcon_"+sPhName+"_'
              + i).innerHTML='';");
  script.Append("eval('document.all.MAPH_AttIconUrl_" + sPhName+"_'
              + i).value='';");
  script.Append("eval('document.all.MAPH_AttName_" + sPhName + "_'
              + i).value='';");
  script.Append("eval('document.all.MAPH_AttLink_" + sPhName + "_'
              + i).value='';");
  script.Append("}" + crlf);
  script.Append("</SCRIPT>");

  Page.RegisterClientScriptBlock("MAPH_DeleteAttachment", script.ToString());
}

					  

At the end of the LoadPlaceholderContentForAuthoring() method, call the RenderDeleteAttachmentJavascript() method.

protected override void
LoadPlaceholderContentForAuthoring(PlaceholderControlEventArgs e)
{
   . . . code continues . . .
   RenderDeleteAttachmentJavascript();
}

4. Reusing the Insert Attachment Dialog

We need a dialog for authors to specify the file to attach and its display text. While it is possible to write one from scratch, a better idea would be to reuse the Insert Attachment dialog that ships with Web Author.

The Insert Attachment dialog provides the author with the option of either attaching a shared resource or a local attachment. Depending on the whether the developer has allowed local attachments, the author may be restricted to only selecting attachments from resource galleries. In such cases, the Insert Local Attachment link will not be available. After the author has made the selection, he or she is provided with a field for entering the display text of the attachment.

Calling the Dialog

To call the Insert Attachment dialog, we borrow the WBC_launchAttachmentGallery() method found in the AuthFormClientIE.js used by Web Author. The method accepts six arguments that affect the dialog’s behavior.

Argument	What it does
strPostQueryString	A querystring containing information about the posting in unpublished mode such as its GUID or, if it’s a new posting, the channel’s GUID.
strPhName	The name of the placeholder.
strPhType	The value here determines how the Insert Attachment dialog passes information about the attachment back to the calling control. When dealing with attachments, Web Author recognizes the following values: MultiPurpose. Applies to controls that accept HTML with full formatting. SingleAttachment. Used by the SingleAttachmentPlaceholderControl for single file uploads. ThinEditIE. Similar to MultiPurpose. The difference is that insertions to the placeholder use the placeholder document object model (DOM) instead. We will use this option in this example.
bAllowUpload	A Boolean to indicate if local attachments are allowed. A value of false means that only resource gallery items can be attached.
bAttachIcon	A Boolean flag to indicate if the attachment should be rendered as an icon. When it is set to true, the attachment is added to the content as an icon. Otherwise, it will be displayed as a text link.
bAllowVideo	The last Boolean indicates if video attachments are supported. This is a throwback to the previous version of MCMS where videos were supported. In MCMS 2002, this value should always be set to false.

Putting it all together, here’s the script that launches the Insert Attachment dialog. Of course, the GUIDs and the placeholder name are variables that will have to be dynamically generated. The following code snippet would allow local attachments and use icons to represent attachments:

Code View: Scroll / Show All

WBC_launchAttachmentGallery('wbc_purpose=Basic&NRMODE=Unpublished&WBCMODE=Pres
entationUnpublished&FRAMELESS=true&NRCHANNELGUID={C40686DA-83CE-452F-AF24-
3D990FA2BAC1}&NRNODEGUID={7AF93078-5FF8-4963-A9F9-B1A0977258A7}',
'NewHtmlPlaceholderDefinition1', 'ThinEditIE', true, true, false);

					  

The GetAttachmentDialog() method generates the required client-side script. The script gathers information about:

• The channel’s and posting’s GUIDs.

• The name of the placeholder the control is bound to.

• Whether or not local attachments are allowed.

• Whether the attachments should be displayed as icons or text. For this control, we will always set this parameter to true as we want icons to be displayed in the authoring table.

Once it has collected the necessary data, it puts them together as arguments of the WBC_launchAttachmentGallery() function. Add the GetAttachmentDialog() method now:

private string GetAttachmentDialog(int i)
{
  // Check to see if the NRCHANNELGUID querystring contains a value
  // If it does, then it's most likely a new posting
  string channelGUID = Page.Request.QueryString["NRCHANNELGUID"];
  if (channelGUID != "")
  {
    channelGUID = "&NRCHANNELGUID="+channelGUID;
  }

  // Get the GUID from the NRNODEGUID querystring parameter
  string postingGUID = Page.Request.QueryString["NRNODEGUID"];

  // Get the name of the placeholder to bind
  string placeholderName = this.PlaceholderToBind;

  // Are local attachments allowed?
  string allowLocalAttachments = (!m_resourceGalleryOnly).ToString();

  StringBuilder script = new StringBuilder();

  // Specify the name of the placeholder that we are adding the attachment to
  script.Append("MAPH_DestPH ='" + placeholderName + "_" + i.ToString()
                                                         + "';");

  // Launch the Insert Attachment Dialog
  script.Append("WBC_launchAttachmentGallery('"
              + "wbc_purpose=Basic&"
              + "NRMODE=Unpublished&"
              + "WBCMODE=PresentationUnpublished&"
              + "FRAMELESS=true" + channelGUID + "&"
              + "NRNODEGUID=" + postingGUID + "',"
              + "'" + placeholderName + "',"
              + "'ThinEditIE',"
              + allowLocalAttachments.ToLower() + ","
              + "true,"
              + "false);");

  script.Append("return false");

  return script.ToString();
}

					  

Returning Values from the Dialog

The Insert Attachment dialog allows the author to specify the attachment and its display text. It’s not a modal dialog. Therefore, in order for content to be written back to the placeholder control, the dialog accesses client-side functions within the calling window.

Depending on the chosen placeholder type, Web Author prepares different client-side routines. The “ThinEditIE” placeholder type used in this example calls the WBC_setThinEditIEAttachment() method found within the AuthFormClientIE.js script (located in the <install directory>\ Microsoft Content Management Server\Server\IIS_CMS\WebAuthor\Client\ PlaceholderControlSupport\ directory).

We need to modify the WBC_setThinEditIEAttachment() routine to update the authoring table with the attachment’s icon, display text, and URL. The tricky part is doing so without modifying the original code (or we will cross Microsoft support boundaries, plus not modifying the original file safeguards the code from being overwritten when future service packs are applied). As a workaround, we will create a modified version of the method and add it to the page. When the browser sees two JavaScript methods with the same name, one defined in within the page and a second in a separate *.js file, the browser will choose to run the one embedded within the page.

To begin, let’s take a look at the original WBC_setThinEditIEAttachment() routine shown below. It accepts three input parameters:

• The name of the placeholder that’s accepting the attachment

• The URL of the uploaded attachment

• The display name of the attachment

It uses the URL and display name of the attached file to construct an HTML anchor tag. The anchor tag is added to the placeholder by calling the insertHtml() method of the placeholder’s DOM. Don’t worry about typing in the code for now. We will be writing a server-side function to generate this script on the fly later.

function WBC_setThinEditIEAttachment(strPhName, strURL, strDispText)
{
  var strMyDispText = strDispText;
  if (strMyDispText == "")
  {
    strMyDispText = strURL;
  }

  document.all["NCPHRICH_" + strPhName].insertHtml("<a href=\"" + strURL
                                           + "\">" + strMyDispText + "</a>");
}

					  

While the WBC_setThinEditIEAttachment() method works perfectly for regular HtmlPlaceholderControls, in order for it to function correctly within the MutipleAttachmentPlaceholderControl, we need to make several modifications:

• The method calls an object with an ID of NCPHRICH_(PlaceholderName): our custom control has a different naming convention and executing this line of code will result in an error.

• Instead of inserting an entire anchor tag in an HtmlPlaceholderControl, we need to pass information about the attachment back to the appropriate hidden fields and cells within the table in the multiple attachment placeholder control.

Client-Side Script for All Types of Placeholder Controls

Let’s tackle the first problem. By default, the WBC_setThinEditIEAttachment() method works only with the out-of-the-box placeholder controls. Placeholder controls that ship with MCMS have IDs prepended with the text NCPHRICH to differentiate them from custom controls that we build. Our control does not have the ID of NCPHRICH_(PlaceholderName). As a result, the following line of code will lead to ’document.all[...]’ is null or not an object errors when the dialog is used with custom controls.

document.all["NCPHRICH_" + strPhName].insertHtml("<a href=\"" + strURL
                                         + "\">" + strMyDispText + "</a>");

On the other hand, we can’t remove the line of code entirely as there may be some out-of-thebox placeholder controls on the same page that require it. To get around this, we will wrap the line in a check to see if the object is undefined (which will be the case for the multiple attachment placeholder control). Again, don’t worry about adding the code to the class file for now, we will show you how the JavaScript gets injected later.

function WBC_setThinEditIEAttachment(strPhName, strURL, strDispText)
{
  var strMyDispText = strDispText;
  if (strMyDispText == "")
  {
    strMyDispText = strURL;
  }

  if(typeof document.all["NCPHRICH_" + strPhName] != 'undefined')
  {
       document.all["NCPHRICH_" + strPhName].insertHtml("<a href=\"" + strURL
                                                         + "\">" + strMyDispText + "</a>");
  }
 }

					  

Passing Attachment Information to the Placeholder Control

Now, on to the second problem of passing information about the attachment back to the multiple attachment placeholder control. We will populate the hidden fields and textboxes with information about the attachment’s icon, display text and URL.

To get this information, let’s look at two input parameters passed into the WBC_setThinEditIEAttachment() method:

Input Parameter	What it means
StrUrl	As the name suggests, this parameter contains the URL of the attachment.
strMyDispText	Stores the icon. The returned HTML is an image tag, which looks like this: <img alt="Plants are Green!" src="/NR/rdonlyres/670B7551-5A53-4B0A- 99782B7AD3EE7BC8/0/MyAttachment.doc? thumbnail=true&label=Plants%20are%20Green%21" border="0">

So strUrl contains the URL of the attachment and strMyDispText holds the icon as shown in the script below:

function WBC_setThinEditIEAttachment(strPhName, strURL, strDispText)
{
  var strMyDispText = strDispText;
  if (strMyDispText == "")
  {
    strMyDispText = strURL;
  }
  if(typeof document.all["NCPHRICH_" + strPhName] != 'undefined')
  {
    document.all["NCPHRICH_" + strPhName].insertHtml("<a href=\"" + strURL
                                           +  "\">" + strMyDispText + "</a>");
  }
  else
								{
								// Return the image of the icon
								if (typeof document.all["MAPH_AttIcon_" + MAPH_DestPH] !='undefined')
								{
								document.all[\"MAPH_AttIcon_\" + MAPH_DestPH].innerHTML = strMyDispText;
								}
								// Return the attachment's URL
								if (typeof document.all[\"MAPH_AttLink_\" + MAPH_DestPH] != 'undefined')
								{
								document.all[\"MAPH_AttLink_\" + MAPH_DestPH].value = strURL;
								}
								// Return the icon
								if (typeof document.all[\"MAPH_AttIconUrl_\" + MAPH_DestPH]
                                                           != 'undefined')
  {
								document.all[\"MAPH_AttIconUrl_\" + MAPH_DestPH].value = strMyDispText;
								}
 }
}

					  

What about the display text? We need to extract the display text from the alt attribute of the icon’s image tag. To do so, we will split strMyDispText using double-quotes (”) as the separator. Let’s say the original HTML is:

<img alt="DisplayText" src="AttachmentUrl" border="0">

The array formed after splitting is shown below where the second element of the resulting array contains the display text from the alt attribute:

Array Item 0:  <img alt=
Array Item 1:   DisplayText
Array Item 2:  src=
Array Item 3:  AttachmentUrl
Array Item 4:  border=
Array Item 5:  0
Array Item 6:  >

The extracted values are deposited into the hidden form fields and textboxes generated earlier.

function WBC_setThinEditIEAttachment(strPhName, strURL, strDispText)
{
  . . . code continues . . .
  if(typeof document.all["NCPHRICH_" + strPhName] != 'undefined')
  {
    . . . code continues . . .
  }
  else
  {
    . . . code continues . . .

    // Split strMyDispText using the double-quote character as the separator
    elements = strMyDispText.split('\"');

    // Return the Display Text
    if (typeof document.all[\"MAPH_AttName_\" + MAPH_DestPH] != 'undefined')
    {
      // The display name is the second element of the array
      document.all[\"MAPH_AttName_\" + MAPH_DestPH].value = elements[1];
    }
  }
}

					  

Generating the WBC_setThinEditIEAttachment() Method

As our custom placeholder control is constructed entirely from server-side code, we need to generate the client script above on the fly and register it with Page.RegisterStartUpScript(). To do so, we must add the helper function RenderResourceGalleryRelatedJavascript() shown below to the code:

private void RenderResourceGalleryRelatedJavascript()
{
 StringBuilder script = new StringBuilder();

 // Start the script block
 script.Append("<SCRIPT language=\"javascript\">" + crlf);

 // Declare the MAPH_DestPH variable
 script.Append("var MAPH_DestPH = \"\";" + crlf);

 // Define WBC_setThinEditIEImage function to replace one defined by MCMS
 script.Append("function WBC_setThinEditIEAttachment(strPhName, strURL,"
             + "strDispText){" + crlf);

 script.Append("var strMyDispText = strDispText;" + crlf
             + "if (strMyDispText == \"\") "
             + "{"
             + "strMyDispText = strURL;"
             + "}" + crlf);

 script.Append("if(typeof document.all[\"NCPHRICH_\" + strPhName] !=
'undefined')"
             + "{"
             + "document.all[\"NCPHRICH_\" + strPhName].insertHtml"
             + "(\"<a href=\\\" + strURL + \\\">\" + strMyDispText
             + \"</a>\");"
             + "}" + crlf);

 script.Append("else"
             + "{"
             + "elements = strMyDispText.split('\"'); " + crlf);

 script.Append("if(typeof document.all[\"MAPH_AttIcon_\"
             + MAPH_DestPH]!='undefined')"
             + "{"
             + "document.all[\"MAPH_AttIcon_\"
             + MAPH_DestPH].innerHTML=strMyDispText;"
             + "}" + crlf);

 script.Append("if(typeof document.all[\"MAPH_AttLink_\"
             + MAPH_DestPH]!='undefined')"
             + "{"
             + "document.all[\"MAPH_AttLink_\" + MAPH_DestPH].value = strURL; "
             + "}" + crlf);

 script.Append("if(typeof "
             + "document.all[\"MAPH_AttIconUrl_\"+MAPH_DestPH]!='undefined')"
             + "{"
             + "document.all[\"MAPH_AttIconUrl_\"
             + MAPH_DestPH].value =strMyDispText;"
             + "}" + crlf);

 script.Append("if (typeof "
             + "document.all[\"MAPH_AttName_\"+MAPH_DestPH]!='undefined')"
             + "{"
             + "document.all[\"MAPH_AttName_\"
             + MAPH_DestPH].value = elements[1];"
             + "}" + crlf);

     // Close the if-else block
     script.Append("}" + crlf);

     // Close the function
     script.Append("}" + crlf);

     // Close the script block
     script.Append("</SCRIPT>");

     // Register the script
     this.Page.RegisterStartupScript("WBC_setThinEditIEAttachment",
                                                            script.ToString());
   }

					  

Finally, at the end of the LoadPlaceholderContentForAuthoring() method, we add a call to the RenderResourceGalleryRelatedJavascript() method:

   protected override void LoadPlaceholderContentForAuthoring(
                                                 PlaceholderControlEventArgs e)
    {
     . . . code continues . . .

      RenderResourceGalleryRelatedJavascript();
   }