Small apps that show Ionic features and other how-tos. # Using *Native APIs* from Ionic One of the premium features of the Ionic framework is its ability to allow simple integrations by adding native device functionality. Here, we will demonstrate how you can easily add any Cordova plugin to your app. You can check the list of officially supported plugins on [this](https://ionicframework.com/docs/v3/native/) page. ## *Call Number* In this example, we will demonstrate how to define the [**Call Number**](https://ionicframework.com/docs/v3/native/call-number/) npm package. 1. First of all, select the needed plugin and open its [page](https://ionicframework.com/docs/v3/native/call-number/). Then, click the link to the [plug-in Github page](https://github.com/Rohfosho/CordovaCallNumberPlugin):

2. Import the plugin by choosing one of the two ways: * download ZIP to your drive:

* or import with Git URL:

> 👍 Importing Cordova plug-ins > > You can check [this](https://docs.appery.io/docs/cordova-custom-plugins#importing-cordova-plugins-from-github) document to learn more details about importing Cordova plugins from GitHub. The plugin should now be added to the **Cordova plugins** list under the **Resources > Cordova plugins** tab:

3. Now, in the app, go to **App settings > Cordova plugins > Imported Cordova plugins**, enable the plugin and save the app:

4. Open the **App Settings > Npm modules** tab, add a new dependency and copy the *npm* path (`@ionic-native/call-number`) from the plugin documentation to the **Dependency** field and add the number of version indicated:

5. Now, scroll down the plugin doc page and copy the `import` line code (`import { CallNumber } from '@ionic-native/call-number';`) to the **Imports** section of the **[app](doc:2-creating-an-app-ui-pages-and-tabs#index-screen)** page **[MODULE](https://docs.appery.io/docs/apperyio-visual-builder#module-panel)** panel and add the `/ngx` part to it so that it looks like this: `import { CallNumber } from '@ionic-native/call-number/ngx';`:\ !!!

> 👍 `/ngx` > > Make sure that the code you copy ends with `/ngx`.\ > Otherwise, you will get an error! 6. Add the plugin to the **Providers** field under the **[app](doc:2-creating-an-app-ui-pages-and-tabs#index-screen)** page **[MODULE](https://docs.appery.io/docs/apperyio-visual-builder#module-panel)** panel (just scroll the page down to locate this field):

7. Finally, copy the code from the *import* (with adding `/ngx`) and *constructor* lines and paste it to the app page **Custom Includes** (with adding `/ngx` to the path) and **Variables** sections where the plugin will be used and select the ***Add DI*** checkbox for the variable:

> 📘 Note! > > **DI** stands for **Dependency Injector**. 8. Enjoy using the plugin you just added to your app! ## Show *Status Bar* on Device Recently, an issue from Ionic has been reported preventing the top status bar from appearing on the device. If you are the unlucky one facing this issue, check the workaround suggested by our Team below. Actually, you will need to follow the steps that are similar to those described in the [Using Native APIs from Ionic](https://docs.appery.io/docs/ionic-5-solutions#using-native-apis-from-ionic) section with the only difference: the plugin to be used is **Status Bar**. 1. So, first of all, open the plugin [page](https://ionicframework.com/docs/v3/native/status-bar/) and click the link to the [plugin Github page](https://github.com/apache/cordova-plugin-statusbar). 2. Import the plugin (more information about how you can do it can be found [here](https://docs.appery.io/docs/cordova-custom-plugins#importing-cordova-plug-ins-from-github)). 3. Check that the plugin is added to the **Cordova plugins** list under the **Resources > Cordova plugins** tab:

4. In the app, open **App settings > Cordova plugins > Imported Cordova plugins**, enable the plugin and save:

5. Switch to the **App Settings > Npm modules** tab, add a new dependency and copy the *npm* path `@ionic-native/status-bar` to the **Dependency** field:

> 📘 > > This can be found in the plugin [documentation](https://ionicframework.com/docs/v3/native/status-bar#installation):

6. Now, scroll down the plugin [documentation](https://ionicframework.com/docs/v3/native/status-bar/#usage) page to the **Usage** section and copy the import line code (`import { StatusBar } from '@ionic-native/status-bar/ngx';`) to the **Imports** section of the page where the plugin will be used (this will also apply to all app pages by default) **[MODULE](https://docs.appery.io/docs/apperyio-visual-builder#module-panel)** panel:

7. Scroll the **[MODULE](https://docs.appery.io/docs/apperyio-visual-builder#module-panel)** panel page down to locate the **Providers** field and add the **StatusBar** plugin:

8. After that, go to the **[CODE](https://docs.appery.io/docs/apperyio-visual-builder#code-panel)** panel and click **Edit Internal includes** and add the ***\{ Platform } from "@ionic/angular"*** dependency to the project:

9. Then, copy the code from the *import* and *constructor* lines (go back to the plugin [documentation](https://ionicframework.com/docs/v3/native/status-bar/#usage) page for reference) and paste it for **Custom includes** and **Variables** fields. 10. Also, add one more variable, `platform` of the **Platform** type. Make sure that the **Add DI** check boxes are selected for both variables.\ When ready, your page **[CODE](https://docs.appery.io/docs/apperyio-visual-builder#code-panel)** panel should look like shown in the screenshot:

12. Finally, open the screen **[DESIGN](https://docs.appery.io/docs/apperyio-visual-builder#design-panel)** panel, expand the **[EVENTS](https://docs.appery.io/docs/apperyio-visual-builder#events-tab)** tab from the bottom and define the ***[Page create](https://docs.appery.io/docs/5-event-handling#angular-events)*** event with the following code: ``` this.platform.ready().then(() => { if (this.platform.is('android')) { this.statusBar.overlaysWebView(false); this.statusBar.backgroundColorByHexString('#4d838f'); } }); ``` This is how it should look like in the **[App Builder](https://docs.appery.io/docs/apperyio-visual-builder)**:

Now, you can save your app and build it to check on the device: the status bar should be of specific color indicated in the code (#*4d838f*). # Passing Data to/from *Modal Screen* In this example, you will learn how to pass properties from **Screen1** to a [modal screen](https://docs.appery.io/docs/5-event-handling#modal-page-creation) and back. 1. Suppose, we have two properties, for example, ***Title*** and ***Description*** added as **Inputs** on **Screen1** and a modal screen named **modal1**. 2. On **Screen1**, create a **[Button](doc:ionic-5-ui-components-properties#button)**, name it **Open modal**:

3. Then, unfold the **Screen1** **[EVENTS](https://docs.appery.io/docs/apperyio-visual-builder#events-tab)** tab below, select the button and, for its ***[Click](https://docs.appery.io/docs/5-event-handling#common-events)*** event, select the ***[Run TypeScript](https://docs.appery.io/docs/5-event-handling#run-typescript)*** action and run the following TypeScript by using the ***[Show modal](https://docs.appery.io/docs/snippets#show-modal)*** snippet (select from the **Insert snippet** dropdown):

Make sure that necessary adjustments have been made to the code: ```typescript this.Apperyio.showModal("modal1", { // "modal1" is modal screen name componentProps: {title: "Some title", description: "Some cool description"}, // here is data that we want to send showBackdrop: true, backdropDismiss: true, cssClass: "", animated: true, keyboardClose: true }) .then(modal => { modal.present(); modal.onDidDismiss().then((dataReturned) => { console.log(dataReturned.data); // here we can process data received from modal screen }); }); ```

4. Now, go to **modal1** screen and add one **[Text](https://docs.appery.io/docs/ionic-5-ui-components-properties#text)** and two **[Button](https://docs.appery.io/docs/ionic-5-ui-components-properties#button)** components to it:

5. Now, switch to the **modal1** **[CODE](https://docs.appery.io/docs/apperyio-visual-builder#code-panel)** panel and add two variables with the names `title` and `description`; both of **String** type:

> 🚧 > > Make sure that the variables' names correspond with the object properties' names defined in step 3: `{title: "Some title", description: "Some cool description"}`.\ > This is why we create variables with the names `title` and `description` of **String** type in this step. 6. To use them on **modal1** inside the code, `this.title` and `this.description` can be used.\ But we advise using the mapping feature. For example, in this case, the following mapping can be used for the ***[Before page showing](https://docs.appery.io/docs/5-event-handling#ionic-5-events)*** event of the **[Page](https://docs.appery.io/docs/2-creating-an-app-ui-pages-and-tabs#properties-1)** component where the variables are mapped to their corresponding components on the screen:

7. To close [modal](https://docs.appery.io/docs/5-event-handling#modal-page-creation) and send data from **modal1** back to **Screen1**, select the **OK** button and, by using the ***[Close modal](https://docs.appery.io/docs/snippets#close-modal)*** snippet (select from the **Insert snippet** dropdown), run the following ***[Run TypeScript](https://docs.appery.io/docs/5-event-handling#run-typescript)*** event by the button click with passing the data we need to send (in this case, `{action: "ok"}`):

8. To close [modal](https://docs.appery.io/docs/5-event-handling#modal-page-creation) with passing different data, for example,`cancel`, select the **Cancel** button and, by using the same ***[Close modal](https://docs.appery.io/docs/snippets#close-modal)*** snippet, run the following ***[Run TypeScript](https://docs.appery.io/docs/5-event-handling#run-typescript)*** event by the button click but sending different data to the modal (`{action: "cancel"}`):

Now, test the app opening the modal screen:

# Basics about Working with *Select* Component ## Populating *Select* Options with Data Using Variables 1. To populate options with **[Select](https://docs.appery.io/docs/ionic-5-ui-components-properties#selct)**, you need to have an array with items inside. 2. Add a new variable to the page. Name it to `optionsList` and set its type as **Any**:

3. Go to the page **[DESIGN](https://docs.appery.io/docs/apperyio-visual-builder#design-panel)** panel and add (or activate) the **[Select option](https://docs.appery.io/docs/ionic-5-ui-components-properties#select-option)** component. Then define its attributes under the **[PROPERTIES](https://docs.appery.io/docs/1-creating-an-app-ui-palette#properties-overview)** panel as follows: * **\*ngFor** = ***let optionItem of optionsList***. This attribute will multiply the **Select Option** component with every item in the array in the variable ***optionsList***. * **Value** = ***\{\{optionItem.id}}***. This attribute sets a value for certain select option and will be used to get or set the selected option. * **Text** = ***\{\{optionItem.text}}***. This attribute sets a select option text.

4. Now, you can fill the `optionsList` variable with an array in the code. Executing this code will populate the **[Select](https://docs.appery.io/docs/ionic-5-ui-components-properties#select)** component: ```typescript this.optionsList = [ {"text": "Red", "id": "1"}, {"text": "Green", "id": "2"}, {"text": "Blue", "id": "3"} ]; ``` ## Getting and Settings Selected Option(s) into Variable 1. Add another variable, `selectValue`, to the page and set its type to **Any**:

2. On the page **[DESIGN](https://docs.appery.io/docs/apperyio-visual-builder#design-panel)** panel, activate (by clicking on it) the **[Select](https://docs.appery.io/docs/ionic-5-ui-components-properties#select)** component and set its **[(ngModel)]** attribute to ***selectValue***:

3. Now, you can use the following code to check the selected option in the **[Select](https://docs.appery.io/docs/ionic-5-ui-components-properties#select)** component: ```typescript //where "2" is a value of option which you want to be selected. this.selectValue = "2"; ``` 4. To get the selected option, use the below code: ```typescript //Here this.selectValue variable will contain a String. alert(this.selectValue); ``` ## *Multiple Select* 1. To make the **[Select](https://docs.appery.io/docs/ionic-5-ui-components-properties#select)** component to multiple checked options, set its **Multiple** attribute to ***True***:

2. Now, you can use the following code to check multiple selected options in the **[Select](https://docs.appery.io/docs/ionic-5-ui-components-properties#select)** component: ```typescript //where "2", and "3" are values of options that need to be selected. this.selectValue = ["2", "3"]; ``` 3. To get multiple selected options, use the following code: ```typescript //Note in multiple mode, this.selectValue variable will contain an array with selected items. alert(JSON.stringify(this.selectValue)); ``` # *Internationalization* in Ionic Apps Check [this](https://docs.appery.io/docs/ionic-5-multilingual-sample-app) document to learn how to use the *ngx-translate* third-party internationalization (i18n) library to build a multilingual Ionic app. # Videos > 👍 Example with Generating PDF Files > > You can watch the below video tutorial to learn how to generate PDF files in Appery.io mobile and web applications using the ***[jsPDF](https://www.npmjs.com/package/jspdf)*** *npm* module and complimentary plugins like *jsPDF AutoTable*.\ > Follow these instructions to create well-structured PDFs that render correctly across a host of devices and screen resolutions: {` `} You can also check our [Youtube Channel](https://www.youtube.com/playlist?list=PLdUnWwhvJspY6Ah68fT4CVwXWsCwu_uYb) featuring the newest and/or most requested Appery.io platform options.