ZMLスニペットの作成と管理

ZMLスニペットの作成と管理

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

スニペットは、追加の機能を実装できる、独立した再利用可能なコードブロックです。ZML （Zoho Markup Language）は、Zoho Creatorアプリケーション内でページを作成するためのシンプルなマークアップ言語です。ZMLを使用すると、ページ内のさまざまな要素を定義し、それらの要素をページ上に配置するレイアウト構造を作成し、要素に説明的・論理的なプロパティを追加し、要素の内容を整形することなどができます。 詳細はこちら

ページにZMLスニペットを追加する

  1. アプリを編集します。
  2. ［デザイン］タブに移動し、ページビルダーを開きます。
  3. ページビルダーで、左側のSnippetsをクリックし、ZML Snippetをページ上の必要な位置にドラッグ＆ドロップします。ZMLスニペットエディターが表示されます。


  4. 必要なZMLコードを追加します。下の画像は、ZMLスニペット内にパネルを追加するためのサンプルコードを示しています。


  5. ［保存］をクリックし、エディターを閉じます。
  6. 公開中のページにアクセスすると、対応するスニペットが表示されます。

ZMLスニペット内の関数に複数の引数を渡す

ZMLスニペットでは、関数に複数の引数を渡すこともできます。ここでは、アプリケーションResource Managementを例に、ページ変数としてメールアドレスを渡し、ページ内のボタンをクリックしたときにメールを送信できる関数とZMLスニペットがあるとします。この例では、${frmAdrs} と${toAdrs}が2つのページ変数です。


このボタン用のZMLスニペットです。
  1. <%{
  2. %>
  3. <panel elementName='Panel'>
    <pr width='fill' height='fill'>
    <pc padding='20px' bgColor='#FFFFFF' width='100%' hAlign='center' vAlign='middle'>
    <pr width='auto' height='auto'>
    <pc>
    <button marginLeft='0px' marginRight='0px' marginBottom='0px' marginTop='0px' 操作='ExecuteFunction' パラメーター='${frmAdrs},${toAdrs}' functionName='toSendMail' color='#FFFFFF' size='16px' text='送信する メール' 種類='定額' bgColor='#0072F4' cornerRadius='3px' /> </pc>
    </pr>
    </pc>
    </pr>
    </panel>
  4. <%
パラメーターを渡すための関数です。
  1. 無効 toSendMail( string FrmAdrs, string ToAdrs )
    {
    sendmail
    [
        差出人: input。FrmAdrs
        to: input。ToAdrs
        件名: '送信する メール タスク'
        メッセージ: 'メッセージ'
    ]
    }

注意事項

複数行テキスト項目を含むフォームがあるとします。複数行テキスト項目に改行を含めて入力した場合、その内容はレポートにも同じように表示されます。ところが、同じ複数行テキスト項目を ZML スニペット内の <text> タグで使用すると、改行は表示されません。
段落や、縦方向に並べて表示したいデータの一覧を入力した際に改行を反映させるには、以下のスクリプトを使用することで実現できます。
  1. <%{
  2. newLine = hexToText('0A');
  3. html_lineBreak = '<br>';
  4. encoded_lineBreak = html_lineBreak。replaceAll('<','&lt;').replaceAll('>','&gt;');
  5. var = Form[ID != null].Multi_Line_Field;
  6. new_text = var。replaceAll(newLine,encoded_lineBreak);
  7. %>
  8. <panel>
  9. <pr hAlign='left'>
  10. <pc>
  11. <text renderAsHtml='真' 値='<%=new_text%>'></text>
  12. </pc>
  13. </pr>
  14. </panel>
  15. <%
  16. }%>
このコードを使用すると、入力した内容がそのままの形で反映されます。

入力:
      

出力: