2
2

More than 3 years have passed since last update.

OutSystemsでJavaScriptからScreen Actionを起動する(Traditional Web)

Posted at

ブラウザ内で動作するJavaScriptの処理を起点として、Screen Actionを動作させてみます。
(Traditional Webの場合)

FakeNotify Widgetを使う方法

  1. RichWidgetsモジュールのFakeNotify Widgetを参照に追加
  2. 画面にFakeNotify Widgetを配置し、Nameを設定する
  3. Javascript処理中の、Screen Actionを呼び出したい部分で、「"OsNotifyWidget('<FakeNotify WidgetのId>', <パラメーター>)"」を実行
  4. FakeNotify WidgetのOn Notifyに設定したScreen Actionが起動する

Forgeで利用しているモジュールがありましたのでこれを参考に実装方法を確認します。
Tabs With Fake Notify Widget

下の図が、処理の全体像です。図中の○付き数字は上の数字に対応しています。
qJSToScreenAction_1.PNG

画面左側のTabs_ClientSide Widgetのプロパティ「OnTabActivation」には、タブ選択時に動作するJavaScriptコードを指定します。
(クリックしたときに、FakeNotify WidgetのIDをパラメータにOsNotifyWidget関数を呼ぶ処理が設定されている)

OsNotifyWidget JavaScript関数にFakeNotify WidgetのIdを渡すと、該当WidgetのOnNotify(図の④)が動く。このOnNotifyのScreen ActionでNotifyGetMessageすると、第2引数で渡した値を受け取れる。
なお、この関数、_osjs.jsというOutSystemsが自動で読み込ませるファイルに定義されているんですが、APIドキュメントが見つかりません。OutSystemsが提供しているRichWidgetsが指示している方法なので多分大丈夫ですが、重要度の高いシステムでは使用を少しためらいますね。

見えないButton/LinkをJavaScriptでクリックする方法

  1. 見えないContainer(Display=False)を画面に配置する
  2. Container内に以下の要素を配置する
    1. パラメータを受け取るためのInput Widget(Nameを設定する)
    2. ButtonまたはLinke Widget(Nameを設定する)を配置し、On ClickのScreen Actionを定義
  3. 任意の場所で以下のJavaScriptコードを動作させる

例として、2.1で「HiddenInput」、2.2で「HiddenButton」というNameを設定したとします。
qJSToScreenAction_2.PNG

このとき、Screen Actionに「テスト」という文字列を渡しつつ呼び出すには、

    $('#" + HiddenInput.Id + "').val('テスト');
    $('#" + HiddenButton.Id + "').click();

のようにJavaScriptを実行します。
HiddenInput.Idの部分は、WidgetのNameによって、WidgetのオブジェクトからIdプロパティを取得する処理。
これによって、実行時のHTML上のIDが取得できる。

あとは、Screen Action内で、Inputに紐付いているLocal Variableからパラメータを受け取って通常通り処理可能。

サンプルとして、
https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=7064
のScreenActionFromJavaScriptを参照してください。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2