Programmatically add new line in Infopath Rich text area プログラム的にリッチテキスト領域に改行を挿入する

Today, I am writing this entry in English because I think it may be useful to not only Japanese, but all SharePoint users in abroad. At least I could not find a precise solution by Google (or Bing of course).

今日のエントリは英語にしてみました。ひょっとしたら、これ、海外でもニーズがあるかも?と思いましたので。少なくとも、英語で検索しても適当な答えが見かりませんでした。

It is relatively easy to add a line break programmatically in multi-line text node (refer last entry) . Though, things would be different for a rich text. The same method does not work for rich text area.

通常の複数行テキストノードに改行を挿入するのであれば簡単なのですが(先日のエントリ参照)リッチテキストとなると話は別です。同じ方法は使えません。

So, I am going to do this by using Jscript.
First, here is the sample xsn file AddNewLine.xsn.

そこで、Jscript を利用して、これを実行してみました。
まず、完成品サンプルをここにおいておきます。
AddNewLine.xsn


The form is quite simple. One button, one rich text node, and that is all. Everytime you click the “Add New Line” button, a new line is added to the rich text area.

フォームの設計は非常にシンプルです。
ボタンとリッチテキストのみ。
ボタンが押下される都度、リッチテキスト領域に一行追記されます。

Below, I explain how to designe this form.

以下、このフォームの設計をご説明します。

First of all, you have to create a form with a rich text node, and a button. The name could be anything, but here I say “NewLine” for button and “Rtext” for node. Then, save this form on your local computer.

まず、リッチテキストノードとボタンのあるフォームを作成します。
名前は自由ですが、ここではボタン「NewLine」ノード「Rtext」とします。
そのフォームを、ローカルに保存してください。

Unzip the xsn file, and you should see following internal files.

xsn ファイルを解凍して下さい。
以下の構成ファイルが表示されます。

Open “template.xml” by text editor. You would find the deffinition of the node, such as . Then modify it as [div xmlns=”http://www.w3.org/1999/xhtml”][/div]
note: You should replace [ ] by < >

template.xml をテキストエディタで開きます。
リッチテキストノードを定義した を見つけ、これを次のように変更してください。[div xmlns=”http://www.w3.org/1999/xhtml”][/div]
※[ ] は < > で置換してください。

After you save the change, next open “manifest.xsf” by designe mode and then save it again. This brings you a new template(xsn) file with modified node setting.

変更を保存したら、今度は manifest.xsf をデザインモードで開き、すぐにそのまま保存します。
これで、変更が加わった新しいテンプレートになります。

Open the new template by designe mode, and apply following script(Jscript).

このテンプレートをデザインモードで開き、以下のコード(jscript)を適用します。
[code lang=”js”]function NewLine::OnClick(eventObj)
{
//define your own variable
var Str = "<font color="red">value you want to add as a new line</font>";
var RichtTextNode = "<font color="red">my:myfield/my:Rtext</font>";

var Pnode = XDocument.DOM.selectSingleNode(RichtTextNode);
var Cnode = Pnode.childNodes;

//deleting unwanted text nodes.
for (i=0; i<Cnode.length; i++)
{
if(Cnode[i].nodeName == "#text")
{
Pnode.removeChild(Cnode[i]);
}
}

//setting value for the first line(div tag already exixts)
if(Cnode.length == 1 && Cnode[0].text == "")
{
var Cnode = Pnode.firstChild;
Cnode.text = Str;
}
//otherwise copy the last node(div) and create a new node, then set value.
else{
var Cnode = Pnode.lastChild;
Pnode.appendChild(Cnode.cloneNode(false));
Pnode.lastChild.text = Str;
}
}[/code]

Infopath のテキストフィールドに改行を挿入する


Author

中村 和彦(シンプレッソ・コンサルティング株式会社 代表)が「ユーザ視点の SharePoint 情報」を発信します。元大手製造業 SharePoint 運用担当。現SharePoint コンサルタント。お仕事のお問い合わせはこちらまでお願いします。当ブログにおける発信内容は個人に帰属し所属組織の公式発信/見解ではありません。
FB : 中村 和彦
blog: Be・Better!
MS MVP SharePoint 2009/10-2011/9
MS MVP Office 365 2012/10-2014/9