• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Redirecting to a UIAbility Through the router Event
2
3The **router** capability of the **postCardAction** API can be used in a widget to quickly start a specific UIAbility of the widget provider. By leveraging this capability, an application can provide in the widget multiple buttons, each of which targets a different target UIAbility. For example, a camera widget can provide the buttons that redirect the user to the UIAbility for taking a photo and the UIAbility for recording a video.
4
5![WidgerCameraCard](figures/WidgerCameraCard.png)
6
7> **NOTE**
8>
9> This topic describes development for dynamic widgets. For static widgets, see [FormLink](../reference/arkui-ts/ts-container-formlink.md).
10
11
12Generally, a button is used to start a page. Below is an example:
13
14
15- Design two buttons on the widget page. When one of the buttons is clicked, **postCardAction** is called to send a router event to the specified UIAbility, with the content to be transferred defined in the event.
16
17  ```ts
18  @Entry
19  @Component
20  struct WidgetCard {
21    build() {
22      Column() {
23        Button ('Function A')
24          .margin('20%')
25          .onClick(() => {
26            console.info('Jump to EntryAbility funA');
27            postCardAction(this, {
28              'action': 'router',
29              'abilityName': 'EntryAbility', // Only the UIAbility of the current application is allowed.
30              'params': {
31                'targetPage': 'funA' // Process the information in the EntryAbility.
32              }
33            });
34          })
35
36        Button ('Function B')
37          .margin('20%')
38          .onClick(() => {
39            console.info('Jump to EntryAbility funB');
40            postCardAction(this, {
41              'action': 'router',
42              'abilityName': 'EntryAbility', // Only the UIAbility of the current application is allowed.
43              'params': {
44                'targetPage': 'funB' // Process the information in the EntryAbility.
45              }
46            });
47          })
48      }
49      .width('100%')
50      .height('100%')
51    }
52  }
53  ```
54
55- The UIAbility receives the router event and obtains parameters. It then starts the page specified by **params**.
56
57  ```ts
58  import UIAbility from '@ohos.app.ability.UIAbility';
59  import window from '@ohos.window';
60  import Want from '@ohos.app.ability.Want';
61  import Base from '@ohos.base';
62  import AbilityConstant from '@ohos.app.ability.AbilityConstant';
63
64  let selectPage: string = "";
65  let currentWindowStage: window.WindowStage | null = null;
66
67  export default class EntryAbility extends UIAbility {
68    // If the UIAbility is started for the first time, the onCreate lifecycle callback is triggered after the router event is received.
69    onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
70      // Obtain the targetPage parameter passed in the router event.
71      console.info("onCreate want:" + JSON.stringify(want));
72      if (want.parameters?.params !== undefined) {
73        let params: Record<string, string> = JSON.parse(JSON.stringify(want.parameters?.params));
74        console.info("onCreate router targetPage:" + params.targetPage);
75        selectPage = params.targetPage;
76      }
77    }
78    // If the UIAbility is running in the background, the onNewWant lifecycle callback is triggered after the router event is received.
79    onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam) {
80      console.info("onNewWant want:" + JSON.stringify(want));
81      if (want.parameters?.params !== undefined) {
82        let params: Record<string, string> = JSON.parse(JSON.stringify(want.parameters?.params));
83        console.info("onNewWant router targetPage:" + params.targetPage);
84        selectPage = params.targetPage;
85      }
86      if (currentWindowStage != null) {
87        this.onWindowStageCreate(currentWindowStage);
88      }
89    }
90
91    onWindowStageCreate(windowStage: window.WindowStage) {
92      let targetPage: string;
93      // Start the page specified by targetPage.
94      switch (selectPage) {
95        case 'funA':
96          targetPage = 'pages/FunA';
97          break;
98        case 'funB':
99          targetPage = 'pages/FunB';
100          break;
101        default:
102          targetPage = 'pages/Index';
103      }
104      if (currentWindowStage === null) {
105        currentWindowStage = windowStage;
106      }
107      windowStage.loadContent(targetPage, (err: Base.BusinessError) => {
108        if (err && err.code) {
109          console.info('Failed to load the content. Cause: %{public}s', JSON.stringify(err));
110          return;
111        }
112      });
113    }
114  };
115  ```
116