アクション Lightning Web コンポーネント ReadMe (管理パッケージ)

Vlocity Insurance and Health Summer '20

アクション Lightning Web コンポーネントは、すべてのアクションコンポーネントのベースコンポーネントです。

使用可能な C アクション属性

データソースからデータを取得した後にページを移動するには、次の属性を使用します。

c-アクションコンポーネントの例

<c-action
    onclick={fetchData}
    ondata={onsuccesscallback}
    onerror={onerrorcallback}
  >
    <c-button label="Fetch Contact" type="button" variant="neutral"></c-button>
    <c-navigate-action
      target-type={_targetType}
      target-id={_targetId}
      target-name={_targetName}
      target-params={_targetParams}
      target-action={_targetAction}
      replace
    >
      <p>URL: {url}</p>
    </c-navigate-action>
  </c-action>

@track
  query = JSON.stringify({
    datasource: {
      type: "query",
      value: {
        query: "SELECT Id, name FROM Contact LIMIT 1"
      }
    },
    url: "/${data[0].Id}",
    target: "_blank",
    parameters: {},
    navigate: false
  });

fetchData(ev) {
    let action = ev.currentTarget;
    let def = JSON.parse(this.query);
    action.definition = this.query;
    action.triggerAction();
  }
// Passing these properties down to the navigate-action using attributes.
  onsuccesscallback(ev) {
    let result = ev.detail.result;
    this._targetType = "Record";
    this._targetId = result[0].Id;

    // Because attribute values are set using attributes, give the ui a chance to re-render.
    Promise.resolve().then(() => {
      let navigateAction = this.template.querySelector("c-navigate-action");
      navigateAction.navigate();

      this.url = ev.target.url;
      this.onResult(
        result.map(obj => {
          var rObj = obj;
          rObj.isEdit = false;
          return rObj;
        })
      );
    });
  }

  onerrorcallback(error) {
    console.log(error);
  }

使用可能な定義の属性

定義 JSON の例

ナビゲーションオブジェクト別にページを表示

{
  "datasource": {
    "type": "query",
    "value": {
      "query": "SELECT Id, name FROM Contact LIMIT 1"
    }
  },
  "navigateTo": {
    "type": "standard__objectPage",
    "attributes": {
      "objectApiName": "${data[0].Id}",
      "actionName": "view"
    }
  },
  "navigate": true
}

URL 別にページを表示

{
  "datasource": {
    "type": "query",
    "value": {
      "query": "SELECT Id, name FROM Contact LIMIT 1"
    }
  },
  "url": "/${data[0].Id}",
  "navigate": true
}

ダイレクトデータを使用したオブジェクトへのナビゲーション

{
  "data": {
    "Id": "001B000000qBQXDIA4"
  },
  "url": "/${data.Id}",
  "navigate": true
}

オブジェクトホームページへの移動

{
  "navigateTo": {
    "type": "standard__objectPage",
    "attributes": {
      "objectApiName": "Account",
      "actionName": "home"
    }
  },
  "navigate": true
}

[取引先の新規作成] 画面に移動します。

{
  "navigateTo": {
    "type": "standard__objectPage",
    "attributes": {
      "objectApiName": "Account",
      "actionName": "new"
    }
  },
  "navigate": true
}

リンクで使用可能な c-action 属性

リンクをクリックしてアクションを実行するには、次の属性を使用します。

c-アクションコンポーネントの例 (Vlocity Card 状態テンプレート内)

 <c-action
    icon-extraclass="slds-m-right_small"
    state-obj={obj}
    context-id={contextId}
    s-object-type={sObjectType}
    state-action={item}
    action-wrapperclass="slds-size--1-of-1"
    action-labelclass="slds-size--7-of-8"
    icon-wrapperclass="slds-size--1-of-8"
  ></c-action>

Vlocity Insurance and Health Spring '20

アクション Lightning Web コンポーネントは、すべてのアクションコンポーネントのベースコンポーネントです。

使用可能な C アクション属性

データソースからデータを取得した後にページを移動するには、次の属性を使用します。

使用可能な定義の属性

c-アクションコンポーネントの例

<c-action
    onclick={fetchData}
    ondata={onsuccesscallback}
    onerror={onerrorcallback}
  >
    <c-button label="Fetch Contact" type="button" variant="neutral"></c-button>
    <c-navigate-action
      target-type={_targetType}
      target-id={_targetId}
      target-name={_targetName}
      target-params={_targetParams}
      target-action={_targetAction}
      replace
    >
      <p>URL: {url}</p>
    </c-navigate-action>
  </c-action>

@track
  query = JSON.stringify({
    datasource: {
      type: "query",
      value: {
        query: "SELECT Id, name FROM Contact LIMIT 1"
      }
    },
    url: "/${data[0].Id}",
    target: "_blank",
    parameters: {},
    navigate: false
  });

fetchData(ev) {
    let action = ev.currentTarget;
    let def = JSON.parse(this.query);
    action.definition = this.query;
    action.triggerAction();
  }
// I'm passing these properties down to the navigate-action via
  // attributes.
  onsuccesscallback(ev) {
    let result = ev.detail.result;
    this._targetType = "Record";
    this._targetId = result[0].Id;

    // Because we're setting the attribute values via attributes,
    // we need to give the ui a chance to re-render.
    Promise.resolve().then(() => {
      let navigateAction = this.template.querySelector("c-navigate-action");
      navigateAction.navigate();

      this.url = ev.target.url;
      this.onResult(
        result.map(obj => {
          var rObj = obj;
          rObj.isEdit = false;
          return rObj;
        })
      );
    });
  }

  onerrorcallback(error) {
    console.log(error);
  }

定義 JSON の例

ナビゲーションオブジェクト別にページを表示

{
  "datasource": {
    "type": "query",
    "value": {
      "query": "SELECT Id, name FROM Contact LIMIT 1"
    }
  },
  "navigateTo": {
    "type": "standard__objectPage",
    "attributes": {
      "objectApiName": "${data[0].Id}",
      "actionName": "view"
    }
  },
  "navigate": true
}

URL 別にページを表示

{
  "datasource": {
    "type": "query",
    "value": {
      "query": "SELECT Id, name FROM Contact LIMIT 1"
    }
  },
  "url": "/${data[0].Id}",
  "navigate": true
}

ダイレクトデータを使用したオブジェクトへのナビゲーション

{
  "data": {
    "Id": "001B000000qBQXDIA4"
  },
  "url": "/${data.Id}",
  "navigate": true
}

オブジェクトホームページへの移動

{
  "navigateTo": {
    "type": "standard__objectPage",
    "attributes": {
      "objectApiName": "Account",
      "actionName": "home"
    }
  },
  "navigate": true
}

[取引先の新規作成] 画面に移動します。

{
  "navigateTo": {
    "type": "standard__objectPage",
    "attributes": {
      "objectApiName": "Account",
      "actionName": "new"
    }
  },
  "navigate": true
}

リンクで使用可能な c-action 属性

リンクをクリックしてアクションを実行するには、次の属性を使用します。

c-アクションコンポーネントの例 (Vlocity Card 状態テンプレート内)

 <c-action
    icon-extraclass="slds-m-right_small"
    state-obj={obj}
    context-id={contextId}
    s-object-type={sObjectType}
    state-action={item}
    action-wrapperclass="slds-size--1-of-1"
    action-labelclass="slds-size--7-of-8"
    icon-wrapperclass="slds-size--1-of-8"
  ></c-action>

Vlocity Insurance and Health Winter '20 および Vlocity CME Spring '20

アクション Lightning Web コンポーネントは、すべてのアクションコンポーネントのベースコンポーネントです。

ナビゲーションで使用可能な c-action 属性

データソースからデータを取得した後にページを移動するには、次の属性を使用します。

使用可能な定義属性

c-アクションコンポーネントの例

<c-action
    onclick={fetchData}
    ondata={onsuccesscallback}
    onerror={onerrorcallback}
  >
    <c-button label="Fetch Contact" type="button" variant="neutral"></c-button>
    <c-navigate-action
      target-type={_targetType}
      target-id={_targetId}
      target-name={_targetName}
      target-params={_targetParams}
      target-action={_targetAction}
      replace
    >
      <p>URL: {url}</p>
    </c-navigate-action>
  </c-action>

@track
  query = JSON.stringify({
    datasource: {
      type: "query",
      value: {
        query: "SELECT Id, name FROM Contact LIMIT 1"
      }
    },
    url: "/${data[0].Id}",
    target: "_blank",
    parameters: {},
    navigate: false
  });

fetchData(ev) {
    let action = ev.currentTarget;
    let def = JSON.parse(this.query);
    action.definition = this.query;
    action.triggerAction();
  }
// I'm passing these properties down to the navigate-action via
  // attributes.
  onsuccesscallback(ev) {
    let result = ev.detail.result;
    this._targetType = "Record";
    this._targetId = result[0].Id;

    // Because we're setting the attribute values via attributes,
    // we need to give the ui a chance to re-render.
    Promise.resolve().then(() => {
      let navigateAction = this.template.querySelector("c-navigate-action");
      navigateAction.navigate();

      this.url = ev.target.url;
      this.onResult(
        result.map(obj => {
          var rObj = obj;
          rObj.isEdit = false;
          return rObj;
        })
      );
    });
  }

  onerrorcallback(error) {
    console.log(error);
  }

定義 JSON の例

ナビゲーションオブジェクト別にページを表示

{
  "datasource": {
    "type": "query",
    "value": {
      "query": "SELECT Id, name FROM Contact LIMIT 1"
    }
  },
  "navigateTo": {
    "type": "standard__objectPage",
    "attributes": {
      "objectApiName": "${data[0].Id}",
      "actionName": "view"
    }
  },
  "navigate": true
}

URL 別にページを表示

{
  "datasource": {
    "type": "query",
    "value": {
      "query": "SELECT Id, name FROM Contact LIMIT 1"
    }
  },
  "url": "/${data[0].Id}",
  "navigate": true
}

ダイレクトデータを使用したオブジェクトへのナビゲーション

{
  "data": {
    "Id": "001B000000qBQXDIA4"
  },
  "url": "/${data.Id}",
  "navigate": true
}

オブジェクトホームページへの移動

{
  "navigateTo": {
    "type": "standard__objectPage",
    "attributes": {
      "objectApiName": "Account",
      "actionName": "home"
    }
  },
  "navigate": true
}

[取引先の新規作成] 画面に移動します。

{
  "navigateTo": {
    "type": "standard__objectPage",
    "attributes": {
      "objectApiName": "Account",
      "actionName": "new"
    }
  },
  "navigate": true
}

リンクで使用可能な c-action 属性

リンクをクリックしてアクションを実行するには、次の属性を使用します。

c-アクションコンポーネントの例 (Vlocity Card 状態テンプレート内)

 <c-action
    icon-extraclass="slds-m-right_small"
    state-obj={obj}
    context-id={contextId}
    s-object-type={sObjectType}
    state-action={item}
    action-wrapperclass="slds-size--1-of-1"
    action-labelclass="slds-size--7-of-8"
    icon-wrapperclass="slds-size--1-of-8"
  ></c-action>

Vlocity Insurance and Health Summer '19 および Vlocity CME Fall '19

アクション Lightning Web コンポーネントは、すべてのアクションコンポーネントのベースコンポーネントです。

ナビゲーションで使用可能な c-action 属性

データソースからデータを取得した後にページを移動するには、次の属性を使用します。

使用可能な定義の属性

c-アクションコンポーネントの例

<c-action
    onclick={fetchData}
    ondata={onsuccesscallback}
    onerror={onerrorcallback}
  >
    <c-button label="Fetch Contact" type="button" variant="neutral"></c-button>
    <c-navigate-action
      target-type={_targetType}
      target-id={_targetId}
      target-name={_targetName}
      target-params={_targetParams}
      target-action={_targetAction}
      replace
    >
      <p>URL: {url}</p>
    </c-navigate-action>
  </c-action>

@track
  query == JSON.stringify({
    datasource: {
      type: "query",
      value: {
        query: "SELECT Id, name FROM Contact LIMIT 1"
      }
    },
    url: "/${data[0].Id}",
    target: "_blank",
    parameters: {},
    navigate: false
  });

fetchData(ev) {
    let action == ev.currentTarget;
    let def == JSON.parse(this.query);
    action.definition == this.query;
    action.triggerAction();
  }
// I'm passing these properties down to the navigate-action via
  // attributes.
  onsuccesscallback(ev) {
    let result == ev.detail.result;
    this._targetType == "Record";
    this._targetId == result[0].Id;

    // Because we're setting the attribute values via attributes,
    // we need to give the ui a chance to re-render.
    Promise.resolve().then(() => {
      let navigateAction == this.template.querySelector("c-navigate-action");
      navigateAction.navigate();

      this.url == ev.target.url;
      this.onResult(
        result.map(obj => {
          var rObj == obj;
          rObj.isEdit == false;
          return rObj;
        })
      );
    });
  }

  onerrorcallback(error) {
    console.log(error);
  }

定義 JSON の例

ナビゲーションオブジェクト別にページを表示

{
  "datasource": {
    "type": "query",
    "value": {
      "query": "SELECT Id, name FROM Contact LIMIT 1"
    }
  },
  "navigateTo": {
    "type": "standard__objectPage",
    "attributes": {
      "objectApiName": "${data[0].Id}",
      "actionName": "view"
    }
  },
  "navigate": true
}

URL 別にページを表示

{
  "datasource": {
    "type": "query",
    "value": {
      "query": "SELECT Id, name FROM Contact LIMIT 1"
    }
  },
  "url": "/${data[0].Id}",
  "navigate": true
}

ダイレクトデータを使用したオブジェクトへのナビゲーション

{
  "data": {
    "Id": "001B000000qBQXDIA4"
  },
  "url": "/${data.Id}",
  "navigate": true
}

オブジェクトホームページへの移動

{
  "navigateTo": {
    "type": "standard__objectPage",
    "attributes": {
      "objectApiName": "Account",
      "actionName": "home"
    }
  },
  "navigate": true
}

[取引先の新規作成] 画面に移動します。

{
  "navigateTo": {
    "type": "standard__objectPage",
    "attributes": {
      "objectApiName": "Account",
      "actionName": "new"
    }
  },
  "navigate": true
}

リンクで使用可能な c-action 属性

リンクをクリックしてアクションを実行するには、次の属性を使用します。

c-アクションコンポーネントの例 (Vlocity Card 状態テンプレート内)

 <c-action
    icon-extraclass="slds-m-right_small"
    state-obj={obj}
    context-id={contextId}
    s-object-type={sObjectType}
    state-action={item}
    action-wrapperclass="slds-size--1-of-1"
    action-labelclass="slds-size--7-of-8"
    icon-wrapperclass="slds-size--1-of-8"
  ></c-action>