4D Qodly Pro：4D 20 R10の新機能

4D 20 R10がリリースされ、製品全体に4D Qodly Proの新しい機能強化が施されました。

HTTPハンドラの設定が、これまで以上に簡単になりました。

ページをレンダリングする際に、URLのパーツやパラメータにアクセスできるようになりました。また、多くの機能強化により、エンドユーザーのユーザージャーニーをよりよく理解し、それぞれのアクションに対して明確なフィードバックを提供することができます。

ロバストでユーザーフレンドリーな、このパワフルな完全パートオブ4Dウェブ開発ソリューションをぜひお試しください。

デスクトップアプリケーションに実装済みのビジネスロジックを活用することで、最小限のコーディング作業でビジネスWebアプリケーションを構築できます。

詳しく見ていきましょう …続きを読む

HTTPハンドラの新しいUI

前回のWhat’s newブログポストでは、新しいHTTPハンドラのUIを紹介しました。

HTTPハンドラとは何か？

HTTPハンドラについては、すでにこのブログ記事をお読みかもしれません。

4D HTTPサーバーに HTTPリクエストハンドラを導入することで、特定のリクエストURLパターンに基づいてトリガーしたいビジネスロジックを正確に定義することができます。

新しいHTTPハンドラのUI

ハンドラのセットアップ中にスムーズで直感的なユーザーエクスペリエンスを提供するために、このUIが強化されました。

新しいQodlyネームスペース

Qodly ネームスペースがデフォルトで利用可能になりました。共有Qodlyソースが含まれます：

• Title(String): カスタムブラウザタブタイトルを設定します。
• Location(Object): レンダリングされたQodly ページのURL コンテンツを処理します。

カスタムブラウザタブタイトルを設定する

エンドユーザーがユーザージャーニーのどこにいるのかをよりよく理解できるように、ブラウザタブにカスタムタイトルを設定できるようになりました。

以前は、タブタイトルは現在のQodlyページ名でした。今は、新しいタイトル 共有Qodlyソースのおかげで、ブラウザタブのタイトルを完全にコントロールすることができます。

下の例では、1つのQodlyページが使用されています：HealthCareページです。このページには、ユーザーのナビゲーション操作に応じて必要なページを表示するページローダーが含まれています。

ブラウザータブのタイトルが常に“HealthCare “と表示されるのを避けるために、アプリ内の任意の場所でTitleQodlyソースの値を設定できるようになりました。

例

認証ページでは、ページが初期化されるときに、タイトルが動的に設定されます：

同じ方法が、Patientsページやアプリ内の他のページにも適用されます：

以下はその例です：

レンダリングされたページのURLコンテンツを処理する

Location Qodlyソース（オブジェクト）のおかげで、レンダリングされたQodlyページURLのURLパーツ、パラメータ、アンカーを取得できるようになりました。

これは、HTTPハンドラがパラメータとして受け取る4D.IncomingMessageクラスのインスタンスと同様に動作します。

例えば、このようなURLは、Qodlyページのレンダリング中に処理することができます（例：Ordersページ）: http://127.0.0.1/$lib/renderer/?w=Orders&id=11

Locationオブジェクトソースのおかげで、Ordersページがロードされたときに関数を呼び出して、ID 11の注文を取得することができます：

Orderソースは以下のマトリックスの選択された要素であるため、その注文が自動的に選択されます。

行列コンポーネントでのスクロールと選択

行列コンポーネントに新しい選択動作オプションが追加され、行列にバインドされたデータが変更されたときの選択動作を定義できるようになりました。

3つのオプションがあります：

• 選択して最初の要素までスクロール

データが変更されると、行列は最初の要素までスクロールし、それを選択します。

• 現在の要素を選択してスクロール

現在選択されている要素が選択されたままとなり、行列はその要素までスクロールします（行列にバインドされた更新データに含まれている場合）。

• 選択なし

自動選択は行われません。必要に応じて、開発者は関数または標準アクションを使用して手動で項目を選択する必要があります。

ネットワーク接続が切れた場合

ネットワーク接続が失われましたか？コードは必要ありません –Qodly ページのレンダリング時に自動的に行われるようになりました。接続が切れるとメッセージが表示されます。

…接続が回復すると消えます：

日付ピッカー周辺

interval データソースに新しいアクティブプロパティが追加されました。

テキスト入力コンポーネントが日付タイプの入力用に強化されました。コンポーネントにバインドされたQodly ソースを介して間隔を提案する場合、新しいブール値のアクティブ・プロパティが使用できるようになりました。

このプロパティが true または見つからない場合、間隔が適用されます。false の場合、インターバルは無視されます – プロパティパネルで有効/無効にするのと同じです。

このインターバルQodlyソースが与えられた場合：

[
  {
    "include": true,
    "type": "range",
    "params": {
      "from": "2025-06-25",
      "to": "2025-06-30"
    },
    "active": false
  }
]

インターバルは無視される（アクティブはFalse）ので、すべての日付が利用可能なままです：

次に、この別の interval ソースを考えます：

[
  {
    "include": true,
    "type": "range",
    "params": {
      "from": "2025-06-25",
      "to": "2025-06-30"
    }
  }
]

activeプロパティがないので、Trueとみなされ、インターバルが適用されます。

日付ピッカーでのナビゲーションがより簡単に

日付ピッカーでのナビゲーションもより簡単になりました。

インターバル・ソースで、いくつかのプロパティの名前が変更されました。

qodlysources for intervals を 日付テキスト入力コンポーネントで使用している場合、いくつかのプロパティの名前が変更されていることに注意してください：

• toDay –> today
• startingfrom –> startingFrom
• untilto –> until

以下はその例です：

[
  {
    "include": true,
    "type": "startingFrom",
    "params": {
      "today": true
    }
  }
]

長いQodlyソース初期値のためのスマートなUI

Qodlyソース初期値エディターは、長い値を扱う際に、よりスムーズで優れたユーザーエクスペリエンスを提供するために強化されました。メガネをかける必要はありません！

セレクトボックスコンポーネントの検索バーをカスタマイズする

セレクトボックスコンポーネントの検索バーが、新しいCSSセレクタを使ってスタイル設定できるようになりました：

self {
	.fd-selectbox__search {
		 border-width: 0.5px;
                 border-color:  #1f5f93;
	}
	.fd-selectbox__search__input {
		background-color: #d5e7f6;
		font-size: 20px;
	}
	.fd-selectbox__search__icon {
		color:  #1f5f93;
	}
}

保存された状態を編集するショートカット

状態を編集しているときに、保存された条件が含まれる場合、それを直接編集するショートカットが用意されました。

状態について復習が必要ですか？ダイナミックUIの扱い方を（再）発見するために、このブログ記事を読んでください。

以上です！

これらの機能強化が、より良いQodlyウェブアプリの構築に役立つことを願っています。

ご期待ください！