PCタグ

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

<pc>

<pc> タグは、パネル行内の列を定義します。

親タグ : <pr>

子タグ : <pr>, <text>, <画像>, <button>

属性

1. width

width 属性は、<pc> の幅を定義します。

例

構文	<pr width='fill'> <pc width='50%' bgColor='#2A70E7'> <text 種類='Text' 値='Zoho Creator'/> </pc> <pc width='50%' bgColor='#00D9B1'> <text 種類='Text' 値='Zoho Creator'/> </pc> </pr>
出力

構文

</pc>

</pc>

</pr>

出力

メモ:

width 属性は、<pr width='fill'> の場合にのみ <pc> に適用されます。

2. padding

padding 属性は、<pc> とその子要素の四辺との間に指定した余白を生成します。

指定可能な値

ピクセル単位の数値

例

構文	<pr width='fill'> <pc width='100%' padding='20px'></pc> </pr>
出力

構文

</pr>

出力

メモ:

padding 属性は任意です。

3. paddingTop

paddingTop 属性は、<pc> の上辺とその子要素との間に指定した余白を生成します。

指定可能な値

ピクセル単位の数値

例

構文	<pr width='fill'> <pc width='100%' paddingTop='50px'></pc> </pr>
出力

構文

</pr>

出力

メモ:

paddingTop 属性は省略可能です

4. paddingRight

paddingRight 属性は、<pc> の右側とその子要素との間に指定した量の余白を生成します。

指定可能な値

ピクセル単位の数値

例

構文	<pr width='fill'> <pc width='100%'> <pr> <pc> <text 値='Zoho Creator'/></pc> <pc paddingRight='25px' bgColor='#00D9B1'> <text 値='Zoho Creator'/></pc> </pr> </pc> </pr>
出力

構文

<pr>

<pc>

</pr>

</pc>

</pr>

出力

メモ:

paddingRight 属性は省略可能です

5. paddingBottom

paddingBottom 属性は、<pc> の下側とその子要素との間に指定した量の余白を生成します。

指定可能な値

ピクセル単位の数値

例

構文	<pr width='fill'> <pc width='100%' paddingBottom='50px'></pc> </pr>
出力

構文

</pr>

出力

メモ:

paddingBottom 属性は省略可能です

6. paddingLeft

paddingLeft 属性は、<pc> の左側とその子要素との間に指定した量の余白を生成します。

指定可能な値

ピクセル単位の数値

例

構文	<pr width='fill'> <pc width='100%'> <pr> <pc> <text 値='Zoho Creator'/></pc> <pc paddingLeft='25px' bgColor='#00D9B1'> <text 値='Zoho Creator'/></pc> </pr> </pc> </pr>
出力

構文

<pr>

<pc>

</pr>

</pc>

</pr>

出力

メモ:

paddingLeft 属性は省略可能です

7. bgColor

bgColor 属性は、<pc> 要素の背景色を指定します。

指定可能な値

16 進数カラーコード。16 進数カラーコードについてはリンクを参照してください。

初期設定値

#FFFFFF

例

構文	<pc bgColor='#2A70E7'>
出力

8. hAlign

hAlign 属性は、<pc> 内のコンテンツの水平方向の配置を指定します。

指定可能な値

left
center
right

初期設定値

center

例

構文	<pc hAlign='left'> <text 種類='Text' 値='Zoho Creator'/> </pc>
出力

構文

</pc>

出力

9. vAlign

vAlign 属性は、<pc> 内のコンテンツの垂直方向の配置を指定します。

指定可能な値

top
middle
bottom

初期設定値

middle

例

構文	<pc vAlign='top'> <text 種類='Text' 値='Zoho Creator'/> </pc>
出力

構文

</pc>

出力

10. 操作

操作属性は、<pc> をクリックしたときに実行される操作を指定します。

指定可能な値

リンク
Form
レポート
Page
ExecuteFunction

例

操作	構文
リンク	<pc 操作='リンク' url='開く URL'></pc>*
Form	<pc 操作='Form' componentLinkName='開く Zoho Creator フォームのリンク名' appLinkName='フォームが属する Zoho Creator アプリケーションのリンク名' /></pc>*
レポート	<pc 操作='レポート' componentLinkName='開く Zoho Creator レポートのリンク名' appLinkName='レポートが属する Zoho Creator アプリケーションのリンク名' /></pc>*
Page	<pc 操作='Page' componentLinkName='開く Zoho Creator ページのリンク名' appLinkName='ページが属する Zoho Creator アプリケーションのリンク名' /></pc>*
ExecuteFunction	<pc 操作='ExecuteFunction' functionName='実行するカスタム関数の名前' /></pc>*

* 各操作タイプの詳細は、以下のセクションを参照してください。

メモ:

操作属性は省略可能です。
操作属性は、データソース属性として機能します。つまり、url、componentLinkName、appLinkName、functionName、パラメーター、successMessage、target、popupWidth および popupHeight の各属性は、操作が指定されている場合にのみ適用されます。

11. url

url 属性は、<pc> をクリックしたときに開くリソースの場所を指定します。

指定可能な値

別の Web サイトを指す url
自分の Zoho Creator アカウント内のコンポーネントを指す url

例

<pc 操作='リンク' url='https://www.zoho.com/creator/'>

メモ:

url属性は省略可能です。
この属性が適用されるのは、<操作='リンク'> の場合のみです。

12. componentLinkName

componentLinkName 属性は、<pc> をクリックしたときに開く Zoho Creator コンポーネントのリンク名を指定します。

指定可能な値

開く Zoho Creator アプリケーションコンポーネントのリンク名。Zoho Creator アカウント内のすべてのアプリケーションに含まれる各コンポーネントのリンク名については、このページを参照してください。

例

操作	構文
Form	<pc 操作='Form' componentLinkName='User_Details'></pc>
レポート	<pc 操作='レポート' componentLinkName='User_Details_Report'></pc>
Page	<pc 操作='Page' componentLinkName='User_Dashboard'></pc>

メモ:

componentLinkName属性は省略可能です。
この属性が適用されるのは、<操作='Form'/'レポート'/'Page'> の場合のみです。

13. appLinkName

appLinkName 属性は、関連付けられているコンポーネントが属する Zoho Creator アプリケーションの名前を指定します。

指定可能な値

開く Zoho Creator アプリケーションのリンク名。Zoho Creator アカウント内のすべてのアプリケーションのリンク名については、このページを参照してください。

例

操作	構文
Form	<pc 操作='Form' componentLinkName='User_Details' appLinkName='Resource_management'></pc>
レポート	<pc 操作='レポート' componentLinkName='User_Details_Report' appLinkName='Resource_management'></pc>
Page	<pc 操作='Page' componentLinkName='User_Dashboard' appLinkName='Resource_management'></pc>

メモ:

appLinkName属性は省略可能です。関連付けるコンポーネントが、現在操作しているアプリケーションと同じアプリケーションに属している場合は、appLinkName を指定する必要はありません。
この属性が適用されるのは、<操作='Form'/'レポート'/'Page'/'ExecuteFunction'> の場合のみです。

14. functionName

functionName 属性は、<pc> をクリックしたときに実行されるカスタム関数の名前を指定します。

指定可能な値

いずれかの Zoho Creator アプリケーションで定義されているカスタム関数。アプリケーション内のカスタム関数の一覧を取得するには、［設定］->［拡張機能］->［カスタム関数］に移動します。

例

<pc 操作='ExecuteFunction' functionName='send_email'/>

メモ:

functionName は、デフォルト名前空間またはカスタム名前空間に属することができます。
関数がカスタム名前空間に属する場合 : <functionName='namespace_name。function_name'>
functionName属性は省略可能です。
これは、<操作='ExecuteFunction'> で、関数名を指定する必要がある場合にのみ適用されます。

15. パラメーター

パラメーター 属性は、<pc> をクリックしたときに実行される操作に関連付けるクエリパラメーターを指定します。

指定可能な値

<操作='Form' / 'レポート' / 'Page'> の場合、パラメーターは、対象コンポーネントのパーマリンクに付加されるクエリ文字列を指します。フォーム、レポート、ページのパーマリンクでクエリ文字列を使用する方法については、こちらのページを参照してください。
<操作='ExecuteFunction'> の場合、パラメーターは、選択したカスタム関数の引数を指します。

例

操作	構文
Form	<pc 操作='Form' componentLinkName='User_Details' appLinkName='Resource_management' パラメーター='App_name=${名前}'></pc> または <pc 操作='Form' componentLinkName='User_Details' appLinkName='Resource_management' パラメーター='App_name=Zoho Creator'></pc>
レポート	<pc 操作='レポート' componentLinkName='User_Details' appLinkName='Resource_management' パラメーター='App_name=${名前}' ></pc> または <ボタンのテキスト='ボタンのラベル' 操作='Form' componentLinkName='User_Details' appLinkName='Resource_management' パラメーター='User_Name='Rob'></pc>
Page	<pc 操作='Page' componentLinkName='開く Zoho Creator ページのリンク名' appLinkName='そのページが属する Zoho Creator アプリケーションのリンク名' パラメーター='App_name=${名前}'></pc>*

操作

構文

Form

または

レポート

または

<ボタンのテキスト='ボタンのラベル' 操作='Form' componentLinkName='User_Details' appLinkName='Resource_management' パラメーター='User_Name='Rob'></pc>

Page

<pc 操作='Page' componentLinkName='開く Zoho Creator ページのリンク名' appLinkName='そのページが属する Zoho Creator アプリケーションのリンク名' パラメーター='App_name=${名前}'></pc>*

メモ:

parameter 属性は省略可能です。
これは、<操作='Form'/'レポート'/'Page'/'ExecuteFunction'> の場合にのみ適用されます。
パラメーターには、名前='Rob' のような固定値、またはページパラメーターを指定できます。
ページパラメーターは App_name=${名前} のように指定します。ここで、名前はページパラメーターです。

16. successMessage

successMessage 属性は、関連付けられた関数が正常に実行されたときに表示されるメッセージを指定します。

指定可能な値

文字列

例

<pc 操作='ExecuteFunction' functionName='send_email' successMessage='送信が完了しました！'></pc>

メモ:

successMessage 属性は省略可能です。
これは、<操作='ExecuteFunction'> の場合にのみ適用されます。

17. target

target 属性は、<pc> をクリックしたときにリンクされた操作をどこに表示するかを指定します。

指定可能な値

new-window（新しいウィンドウ）
same-window（同じウィンドウ）
popup（ポップアップ）

初期設定値

new-window（新しいウィンドウ）

メモ:

これは、<操作='リンク'/'フォーム'/'レポート'/'ページ'> の場合にのみ適用されます。

18. popupWidth

属性popupWidth は、リンクを開くポップアップウィンドウの幅を指定します。

指定可能な値

パーセンテージ（%）またはピクセルで指定する数値

19. bgtype

属性bgtypeは、<pc> の背景画像を指定します。

指定可能な値

gallery

メモ:

bgtype 属性は省略可能です。

20. bgImagePosition

属性bgImagePositionは、<pc> 内の背景画像の配置方法を指定します。

指定可能な値

fill
fit
tile

初期設定値

fill

メモ:

これは、<pc> に bgtype 属性が設定されている場合にのみ適用されます。

21. bgImageRepeat

属性bgImageRepeatは、<pc> の背景画像を繰り返し表示するかどうかを指定します。

指定可能な値

repeat
repeat-x
repeat-y
no-repeat

初期設定値

repeat

メモ:

これは、<pc> に bgtype 属性が設定され、かつ bgImagePosition='tile' に設定されている場合にのみ適用されます。

22. bgHorizontalAlign

属性bgHorizontalAlignは、<pc> 内の背景画像の水平方向の配置を指定します。

指定可能な値

left
center
right

初期設定値

left

メモ:

これは、bgtype属性が <pc> に設定され、bgImagePositionが「fill」または「fit」に設定されている場合にのみ適用されます。

23. bgVerticalAlign

bgVerticalAlign属性は、<pc> 内の背景画像の垂直方向の配置を指定します。

指定可能な値

top
center
bottom

初期設定値

メモ:

これは、bgtype属性が <pc> に設定され、bgImagePositionが「fill」または「fit」に設定されている場合にのみ適用されます。

24. bgImage

bgImage属性は、アカウントの画像ライブラリ内のどの画像ファイルを <pc> タグの背景として設定するかを指定します。

指定可能な値

アカウントの画像ライブラリ内の画像ファイル名

メモ:

これは、bgtype属性が <pc> に設定されている場合にのみ適用されます。

25. overlayColor

overlayColor属性は、<pc> の上に重ねて表示する色を指定します。

指定可能な値

16 進数のカラー値

初期設定値

#0000007f