ページの作成

新しいページを定義する手順

  1. 編集モードで、 新しく作成 - ページを選択します。
  2. 新しいページの画面で、ページに名前を付けます。ページ名には、英数字と特殊文字を使用できます。
  3. [このページを次の場所に配置]のリストボックスは、このページをライブモードで配置するセクションを表示します。新しいセクションは、設定 -> カスタマイズタブから追加されます。詳細はセクション を参照してください。
  4. [作成]をクリックして、ページを作成します。
  5. スクリプトビルダーには、左側のHTML組み込みDeluge タスクを、右側にはテキストエディターを表示します。
  6. [テンプレートの選択]ボタンで選択したテンプレートに基づいたビューを作成します。または、HTMLと Deluge タスクの挿入フォーム/レポートの組み込みや、Widgetの組み込みを使って、自分のビューを最初から作成します。HTMLやDelugeスクリプトに精通している場合は、HTML ビューの記述に、直接[フリーフロースクリプト]タブを使います。
  7. [スクリプトの保存]をクリックして、ビューを保存します。
  8. [プレビューの表示]タブを使って、作成したビューをプレビューします。

HTMLの挿入 と Delugeタスク

  • [HTMLコードの挿入]タスクをドラッグ&ドロップして、HTMLタグをページに挿入します。
  • 編集 ボタンをクリックして、対象のHTMLに挿入するために、Insert HTML ダイアログからリッチテキストモード か、テキストモード を選択します。
  • 構文の挿入ボタンを使って、ページに構文を追加します。Deluge構文ビルダー を使用します。

  • [Delugeタスク]をページの対象の場所にドラッグ&ドロップして、レコードを取得して表示します。例えば、以下の画面では、for eachのDeluge構文が、テーブルの行のヘッダーの後に配置されています。[add new income form]の反復処理ごとに、各レコードに格納された 日付と金額 を表示するための新しい行が作成されます。

HTMLビューに画像を挿入

HTMLビューに引用されたアップロードの項目を使用して、フォームに画像をアップロードします。ファイルのアップロード項目経由で格納された画像/ファイルのURLは、下記の形式になります。

https://creator.skydesk.jp/DownloadFile.do?filepath=/&sharedBy=&appLinkName=&viewLinkName=<viewName>

HTMLビューでは、上記のような画像URLを生成して、HTMLビューに表示できます。下記はHTMLビューで使用できるサンプルHTMLです。

<img src='https://creator.skydesk.jp/DownloadFile.do?filepath=/<FileUploadFieldName>&sharedBy=<userName>&appLinkName=<appName&viewLinkName=<viewName>'>

フォームから画像を取得して、HTMLに挿入するには、下記のフォーマットにあるレコードのタスクの取得を使用します。そこで、[Input.ImageName]は、HTMLビューで定義されたパラメーターです。

rec = Form [Image_Name = input.ImageName];
<img src='https://creator.skydesk.jp/DownloadFile.do?filepath=/<%=rec.FileUpload%>&sharedBy=userName&appLinkName=app1&viewLinkName=view1'>

フォーム/レポートの組み込み

組み込みフォーム/レポートのタスクは、HTMLビューの中で、SkyDesk Creatorの組み込みフォームとビューを有効にします。

  • これを実施するには、
  • 組み込み -> フォーム/レポート タスクをドラッグ&ドロップして、SkyDesk Creatorの組み込みフォームとビューをHTMLページに組み込みます。
  • 組み込みダイアログの[アプリケーションの選択]リストには、自分のアカウントで作成されたすべてのアプリが表示されていますので、対象のアプリケーションを選択します。
  • フォームに組み込む、Formのコンポーネントを選択、または、レポートに組み込むReportのコンポーネントを選択します。
  • HTMLページに組み込むForm/Reportを選択します。
  • [Form Embed properties]で、フォームにヘッダーが必要な場合、指定します。フォームの送信ページで他のベージへの誘導が必要な場合、 [next url]を指定、そして、カスタマイズの成功メッセージと表示する送信/リセットボタン名を指定します。
  • [完了]をクリックして組み込みコードの設定をHTML ビルダーに追加します。

フォームの組み込みコードは、下記のようにHTMLビューの<div>タグの間に挿入されます。

htmlpage Sample_HTML_View()
displayname = "Sample HTML View"
content
<%{%>
<div elName='zc-component' formLinkName='Monthly_Report_Pie_Chart' params='zc_Header=true&zc_SuccMsg=Data Added Sucessfully!&zc_SubmitVal=Submit&zc_ResetVal=Reset'>Loading Form...</div>
<%}%>

レポートやビューのプロパティの組み込みでは、 下記のように、ビューのヘッダー、フッター、セカンダリーヘッダーの表示の有効化/無効化、レコードのリンクの追加/編集のオプションを提供します。

レポートの組み込みコードは、選択したオプションに基づいて、下記のようにHTMLビューの <div>タグの間に挿入されます。

htmlpage Sample_HTML_View()
displayname = "Sample HTML View"
content
<%{%>
<div elName='zc-component' viewLinkName='Expense_Report_By_Category' params='zc_Header=true'>Loading View...</div>
<%}%>

  • HTMLページに組み込まれたレポートを印刷するには、下記のフォーマットのリンクテキストを置き換えます。
    <a href=”http://creator.skydesk.jp/ appOwnerName / appLinkName /print/ viewLinkName “>Print </a>
  • HTMLページに組み込まれたレポートをCSV形式でエクスポートするには、下記のフォーマットのリンクテキストを置き換えます。
    <a href=”http://creator.skydesk.jp/ appOwnerName / appLinkName /csv/ viewLinkName “>CSV Export </a>

メモ:

  • エラーや競合を避けるため、公開ページにアクセス中は、そのページに組み込まれているフォームやレポートも公開されなければなりません。

Widgetの組み込み

Widgetは、HTMLページに組み込まれるコードの集まりです。例えば、他社のサイトからの広告、リンク、画像になります。一般的に、Widgetは他社に考案されたモジュール、コードの一部、プラグインとして知られています。

HTMLページにウィジェットを挿入するには、

  1. 左のメニューから、組み込み -> Widgetタスクをエディターエリアにドラッグ&ドロップします。
  2. ダイアログの中で、幅、高さ、スクロール、 iframeのサイズ、WidgetのURLを指定します。
  3. [完了]をクリックして組み込みWidgetをHTML ビルダーに追加します。
  4. 組み込まれたウィジェットのコードは、下記のように、HTMLページの <iframe> タグ の間に挿入されます。

htmlpage Sample_HTML_View()
displayname = "Sample HTML View"
content
<%{%>
<iframe name='skydeskview' height='100' width='100%' frameborder='0' scrolling='auto' src=' http://www.skydesk.jp' ></iframe>
<%}%>

ページにパラメーターを追加

HTMLページにパラメータを渡すには、 テキストエディターの右上にある[パラメーターを追加]ボタンを使います。指定されたパラメーターは、下記のような形式でビューの定義に追加されます。下記では、2つのパラメーター FromTo が、HTMLページの[Expense Report By Date]に渡されています。

htmlpage "Expense Report By Date"(From, To)
<%{%>

...................
..................

}%>

HTMLビューに渡されたパラメーターが無い場合、[null]が設定されます。パラメーターの設定にコードの追加が必要です。例えば、HTMLビューに下記のコードを追加して、パラメーターが[null]の場合、現在の日付にパラメータを設定します。

if (input.parameter == null)
{
input.parameter = zoho.currentdate.toString();
// As parameter is a string value, the date is converted to string
}

メモ:

組み込みHTMLページにパラメーターを渡す形式

  • https://creator.skydesk.jp/yourname/your_project/view-embed/Your_View_Name/your_parameter=param value

ページのタグ

1. HTMLページの始まりと終わりに使用されているタグは、下記の形式です。例えば、 下記のHTMLページでは、[Sample HTML View」がHTMLビューの名前です。ページは、[Income vs Expenditure]キャプションを持つテーブルを挿入します。

htmlpage "Sample HTML View"()
<%{%>

<table width="100%" cellspacing="1" cellpadding="1" border="1">
<caption>Income Vs Expenditure</caption>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

<%}%>

2. Deluge タスクに設定されるタグは、 <%%>タグとは区別されます。Deluge の構文がHTMLで使用されている場合、<%=%> は、 HTMLのそれとは区別されます。例えば、下記になります。

- Delugeのfor eachタスクはHTMLタスクの間に挿入され、[add_new_income]フォームの変数 r によって保持される各レコードで反復します。
- Delugeのfor eachタスクは、HTMLのそれとは区別され、<% and %> タグで囲まれます。
- for eachの繰り返しで、 HTMLタグの<tr> </tr>を使って新しい行が作成されます。
- r.Date_fieldと r.Amountは、行の各列のデータの表示に使用されるDeluge構文です。Deluge構文 は、<%= と%> タグで囲まれます。

htmlpage "Sample HTML View"()
<%{%>

<table width="100%" cellspacing="1" cellpadding="1" border="1">
<caption>Income Vs Expenditure</caption>
<tbody>
<%for each r in add_new_income
{%>
<tr>
<td><%=r.Date__field%> </td>
<td> <%=r.Amount%></td>
</tr>
<%}%>
</tbody>
</table>

<%}%>

メモ:

  • Deluge タスクに設定されるタグは、 <%%>タグとは区別されます。
  • Deluge構文に設定されるタグは、HTMLの<%=や%>タグとは区別されます。
  • HTML ビルダーは、HTMLページのDeluge タスクを強調します。
  • HTMLページには、いくつでも<%%>タグを含めることができます。次に進む前に、各タグを閉じることを忘れないでください。

サンプルページ

ソフトウェアの作成を手助けして、関連するバグを割り当てる「Feedback Application 」のサンプルを見てみましょう。下記のFeedback の送信フォームは、問題の送信と、モジュールの担当のチームのメンバーへの割り当てに使用されます。[Module Name] は、モジュールのフォームからルックアップで、[Assign To] 項目は、[Team Member ]フォームからのルックアップになります。

下記の画面は、上記のフォームを通じて送信された問題と、割り当てられたチームのメンバーを表示したレポートです。

しかし、各モジュールに割り当てられたすべての問題のサマリービュー、または、各チームメンバーに割り当てられたすべての問題のサマリービューを作成したいと考えると、これはSkyDesk Creator がサポートしている一覧、グリッド、サマリーなどのデフォルトビューでは不可能です。HTML ビューは、HTML と Deluge スクリプトの組み合わせを使って、カスタマイズされたマッシュアップページの作成に使用されます

特定のモジュール/チームのメンバーに割り当てられた問題のサマリーを表示したシンプルなHTMLページ

HTMLページのコード

次のコードは、上記のHTMLページを作成します。HTML タスク ( 緑色) と Deluge タスク (青色 )は、対象のビューを作成するために挿入されます。<% や%> タグは、Deluge タスクを識別するために使用されます。Deluge スクリプトが HTML内で使用されると、 <%=や%>が使用されます。

htmlpage "Summary View"()
<%{%>

<table class=zc-viewtable width="50%" border="1" valign="top">
<caption class="zc-viewtitle">Summary of Assigned Issues</caption>
<tbody>
<tr>
<td valign="top">

<table class=zc-viewtable width=100% >
<caption class="zc-viewtitle">Total issues assigned to each module</caption>
<tbody>
<tr class="zc-row-header">
<td class="zc-viewrowheader">Module Name</td>
<td class="zc-viewrowheader">Total Issues</td>
</tr>

// iterate each record in the Modules form & count the number of records assigned to that module from the Submit_Feedback form

<%for each r in Modules
{
ModuleName = r.Module_Name;
ModuleTotal = count(Submit_Feedback[Module == ModuleName]);%>

// For each module, add a row with module name and total count

<tr class=zc-viewrow>
<td><%=ModuleName%></td>
<td><%=ModuleTotal%></td></tr>
<%}%>

</tbody>
</table>
</td>

 

<td valign="top">
<table class=table zc-viewtable width=100% >
<caption class="zc-viewtitle">Total issues assigned to each team member</caption>
<tbody>

<tr class="zc-row-header">
<td class="zc-viewrowheader">Team Members</td>
<td class="zc-viewrowheader">Total Issues Assigned</td>
</tr>

// iterate each record in theTeam Member form , count the number of records assigned to the team member in the submit_Feedback form

<%for each x in Team_Member
{
MemberName = x.Name;
MemberTotal = count(Submit_Feedback[Assign_To == MemberName]);%>

// For each Team member, add a row with team member name and total count

<tr class=zc-viewrow>
<td><%=MemberName%></td>
<td><%=MemberTotal%></td></tr>

<%}%>
</tbody>
</table>

</td>
</tr>
</table>

<%}%>

Feedback Applicationをダウンロードしてインストールするには、

  1. このリンクを開いて、Feedback_Application.dsをクリックして.dsファイルをダウンロードします。
  2. .dsファイルを自分のアカウントにインストールします