Display Rich Text with Images in XPages Repeat Control

0
votes

I have a main document with a linked set of update docs, with a few fields and a rich text Body field. I am able to display any view columns from the updates in a repeat control, but I would like to display the rich text field in the repeat control as well.

I have tried several approaches, nothing has worked so far.

I tried this solution: 

rowData.getDocument().getFirstItem("Body").getMIMEEntityAsText()

and this one:

rowData.getDocument().getFirstItem("Body").getMIMEEntity().getContentAsText();

and this one:

http://iqjam.net/iqjam/iqjam.nsf/questions/20100914_How_to_Display_a_RichText_fiel.htm

<xp:repeat id="repeat1" rows="30" value="#{view1}" var="row">
    <xp:panel>
        <xp:this.data>
            <xp:dominoDocument var="doc" action="openDocument"
                documentId="#{javascript:row.getNoteID()}">
            </xp:dominoDocument>
        </xp:this.data>
        <xp:inputRichText id="inputRichText1" value="#{doc.ArticleContent}"
            readonly="true">
        </xp:inputRichText>
    </xp:panel>
</xp:repeat>

and this one:

http://www.ibmpressbooks.com/articles/article.asp?p=1681058&seqNum=4

var nd:NotesDocument = rowData.getDocument();
var mime = nd.getMIMEEntity("body");
// if it is MIME then you can passthrough as HTML
if (mime != null) {
      return mime.getContentAsText();
}
// Otherwise just return the plain text
else {
      return nd.getItemValueString("body");
}

They both display only those docs with text only. If there is an embedded image or a mix of image and text, then nothing is displayed.

I would appreciate any suggestions...

4
xpageslotus-domino
If you're using the data source approach (the first code example in your question), you'll need to add ignoreRequestParams="true" to ensure that the action and documentId attributes don't get overridden by any query string parameters present in the URL. – Tim Tripcony
Thanks, Tim! after some faffing around I finally figured out what your comment meant... I added the setting and it worked. – John
I'm with John. Can you please explain some of the lines on your code e.g. the CDATA line, imagename (did you mean the name of the rich text field?), etc. Thanks. – user2917887

4 Answers

4
votes

So with Tim's ignoreRequestParams="true" added, this works:

<xp:repeat id="repeat1" rows="30" value="#{view1}" var="row">
    <xp:panel>
        <xp:this.data>
            <xp:dominoDocument var="doc" action="openDocument"
                documentId="#{javascript:row.getNoteID()}" 
                ignoreRequestParams="true">
            </xp:dominoDocument>
        </xp:this.data>
        <xp:inputRichText id="inputRichText1" value="#{doc.ArticleContent}"
            readonly="true">
        </xp:inputRichText>
    </xp:panel>
</xp:repeat>
1
votes

Ok, as Fredrik wrote, you have a multipart mime field so you need to go through all your entries (text and images).

<xp:text escape="false" id="subContent">
                                        <xp:this.value><![CDATA[#{javascript:
session.setConvertMIME(false);
if(level3List != null){
var nd:NotesDocument = level3List.getDocument();
if(nd != null){
 try{   
  requestScope.status = "";
  var cItem:NotesRichTextItem = nd.getFirstItem("content");
  var mime:NotesMIMEEntity = cItem.getMIMEEntity();
  if (mime != null) {
   // If multipart MIME entity
   if (mime.getContentType().equals("multipart")) {
    // Print content of each child entity
    var child1:NotesMIMEEntity = mime.getFirstChildEntity();
    while (child1 != null) {
     if(child1.getEncoding()==1727){
      //gif             
        requestScope.status +=
        "<img src=\"data:image/png;base64," + 
        child1.getContentAsText() +
        "\"/>"              
      }else{
       //plain
       requestScope.status += 
       child1.getContentAsText() //+ "\n"
     }          
      var child2:NotesMIMEEntity = child1.getFirstChildEntity();
       if (child2 == null) {
        child2 = child1.getNextSibling();
        if (child2 == null) {
         child2 = child1.getParentEntity();
        if (child2 != null) {
         child2 = child2.getNextSibling();
        }
       }
      }
      child1 = child2;
     }
      } else {
     // plain mime no multi
     requestScope.status = mime.getContentAsText();
    }
    } else {
    // No mime > plain text
    requestScope.status = nd.getFirstItem("content").getText();
    }
    // return to display
    return requestScope.status;
  }catch(e){
    return nd.getFirstItem("content").getText();
   }    
  }
}
// Restore conversion
session.setConvertMIME(true);}]]></xp:this.value>
</xp:text>

The only problem I am facing at the moment is, that I am losing the position of the images. They will be all displayed at the bottom.

This code can also be find similar at the IBM documentation

IBM

0
votes

If you only have text there is only one mime entity in the document. But if you have images and text the content is stored as multipart mime. Contenttype will be multipart.

Then you have to get the mime entity and from that mimeentity getfirstsibling and if content type is text then get that and present that.

0
votes

I don't know if this is what you're looking for, but hey. This is a repeat control that I did some time ago, which displays images from RichText field. This is the only way I could display images, and I spent countless hours looking for a better solution.

<xp:repeat id="repeat1" rows="30" var="imagename" indexVar="index">
      <xp:panel></xp:panel>
      <xp:this.value><![CDATA[#{javascript:doc.getItemValueArray("imagenames")}]]></xp:this.value>
      <xp:text escape="false" id="computedField1">
        <xp:this.value><![CDATA[#{javascript:var url = "/" + @ReplaceSubstring(database.getFilePath(), "\\", "/") + "/0/" +
document1.getDocument().getUniversalID()
url += "/$FILE/" + escape(imagename);
return "<a dojoType=\"dojox.image.Lightbox\" group=\"group1\" title=\"" +
imagename + "\" href=\"" + url + "\">" + imagename + "</a><br />"}]]></xp:this.value>
      </xp:text>
    </xp:repeat>