データ機能の概要

    App Builder のデータ機能を使用して、開発中のアプリケーションで外部データソースを追加、編集、使用できます。デフォルトで、App Builder には、ユーザーが参照に使用できる Northwind データ ソースが含まれています。以下は、REST API データ ソースを設定するさまざまな方法を示しています。

    • データ ソースで REST API URL を使用します。
    • Swagger URL またはファイル定義 (json/yaml) を使用します。
    Warning

    ファイルのアップロードで JSON タイプのデータ ソースを使用することは非推奨になりました。

    「.json ファイルのアップロード」機能が削除される前にアプリケーションでデータ ソースをアップロードした場合、「'X' から取得できませんでした。モック データ応答に切り替えます。」という要求が通知されます。

    以前アップロードされたファイルからデータを取得できませんでした

    追加されたすべてのデータ ソースはデータ ツールボックスに配置され、ユーザーは各データ ソースを展開/縮小して、含まれているテーブルおよび選択したフィールドを表示できます。

    App Builder は、応答オブジェクト内のネストされたコレクションもサポートします。戻り値のコレクションをメタデータ オブジェクト (oData など) でラップする API を取り込み、Grid などのデータ バインディングコンポーネントにネスト コレクションを使用したり、それに基づいて繰り返し操作を実行したりできます。

    ネストされたコレクションのデモ

    データ ソースを追加する

    App Builder のデータ機能により、ユーザーは公開されている外部ソース (Rest API) にリンクできます。

    Note

    App Builder に追加されたデータ ソースはユーザー スペースに制限され、追加したユーザーまたはチーム スペース (チーム機能が利用可能な場合) のみに表示されます。

    URL からデータ ソースを追加する

    Swagger データ ソースを追加する

    Swagger ツールの機能は、RESTful API 設計の業界標準である OpenAP I仕様から始まります。

    Swagger 定義 (ファイル URL の提供またはファイルのアップロード) を指定できるようになりました。また、直感的なデザインにより、データ フィールドとエンドポイントを簡単に選択できます。Grid、Card、List、またはその他のバインド可能なコンポーネントにこのデータ ソースをバインドできます。

    Swagger の定義を追加してデータをバインドする方法についての全記事 を参照してください。

    Swagger のデモ

    ローカル ネットワーク ソースからのデータ ソースの使用

    これで、ローカル ホストまたはプライベート ネットワークにリクエストを送信できます。これには、通常の REST エンドポイントと Swagger エンドポイントが含まれます。

    ローカル ネットワーク ソースの使用

    トラブルシューティング

    プライベート ネットワークの使用中にエラー ダイアログが表示された場合は、このセクションが問題の解決に役立ちます。問題が解決しない場合は、問題の報告またはフィードバックの送信セクションに従ってください。

    [リクエストは失敗しました!] エラー ダイアログ

    ローカル ネットワークでの作業の本質により、このタイプのエラーでは、CORS の問題 (クロスオリジン) などが原因でローカル / プライベート サービスが失敗したかどうかを識別するために、追加の作業が必要になります。

    ローカル サービスの追加中に [リクエストは失敗しました!] ダイアログが表示された場合は、ブラウザーの開発ツールを開き (F12)、コンソール / ネットワーク タブでエラーを確認します。最も可能性の高い理由は、CORS の制限です。

    [リクエストは失敗しました!] エラー

    ローカル サービスの構成に基づいて、クロスオリジン リクエストの問題を解決する方法がいくつかあります。これについては、以下で詳しく説明します。

    ASP.NET Core でクロスオリジン リクエスト (CORS) を有効にする

    この記事は、ASP.NET Core アプリで CORS を有効にする方法を示しています。Web App Builder が、すべてまたは特定のオリジンを許可する CORS ポリシーを追加するようにすることができます:

    var builder = WebApplication.CreateBuilder(args);
    var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
    
    // Add services to the container.
    builder.Services.AddControllers();
    
    builder.Services.AddEndpointsApiExplorer();
    builder.Services.AddSwaggerGen();
    builder.Services.AddCors(options =>
    {
        options.AddPolicy(name: MyAllowSpecificOrigins,
                          policy =>
                          {
                              policy.AllowAnyOrigin();
                          });
    });
    

    app の初期化の直後に .UseCors() を設定します。

    var app = builder.Build();
    
    app.UseCors(MyAllowSpecificOrigins);
    
    // Configure the HTTP request pipeline.
    if (app.Environment.IsDevelopment())
    {
        app.UseSwagger();
        app.UseSwaggerUI();
    }
    

    IIS マネージャー、web.config、または C# を使用して CORS を有効にする

    IIS を使用して内部でホストされているデータ ソースにアクセスできるようにするには、以下の手順に従います:

    1. サーバーまたはローカル PC で IIS マネージャーを開きます。
    2. 応答ヘッダーを編集する必要がある Web サイトに移動します。
    3. 下の画像に示すように、編集しているサイトに関連するリストまたはアイコンから、中央のペインから [HTTP 応答ヘッダー] を選択します。
    4. [HTTP 応答ヘッダー] をダブル クリックします。
    5. 次に、右側のペインから [追加] をクリックします。
    6. ダイアログ ボックスが開きます。[名前] には「Access-Control-Allow-Origin」と入力し、[値] にはアスタリスク (*) を入力します。
    7. [OK] をクリックします。これで完了です。

    IIS 構成

    CORS を有効にするには、asp.net Web サイトの web.config ファイルに構成を追加するか、global.asax ファイルにコードを追加します。詳細情報はここ (英語)にあります。

    データ フィールドの選択とフィールド タイプの変更

    データ ソースが追加されると、ユーザーは特定のデータ フィールドをコンポーネント セクションに接続できます。これを行うには、最初にコンポーネント (以下の例では Card コンポーネントを使用) を選択し、[繰り返し] モードを [Data] に変更してメニューをスクロールダウンし、接続するデータ ソースからテーブルを見つけて選択します。最後に、Card セクションを選択したテーブル フィールドに接続します。

    データ フィールドを選択する

    データ ソース テーブルのフィールド タイプを変更する

    データ ソースを繰り返しコンポーネントに接続する

    データ ソースが追加されると、ユーザーは特定のデータ フィールドをコンポーネント セクションに接続できます。これを行うには、最初にコンポーネント (以下の例では Card コンポーネントを使用) を選択し、[繰り返し] モードを [Data] に変更してメニューをスクロールダウンし、接続するデータ ソースからテーブルを見つけて選択します。最後に、Card セクションを選択したテーブル フィールドに接続します。

    データ ソース テーブルのフィールドをコンポーネント セクションに接続する

    その他のリソース