@zhangjun32108 wrote:

Hi,

I want to send data to the InfluxDB cloud. It requires the data is string in the body . And I have to use native HTTP otherwise I have the CORS problem. I could not find a way to send string with native HTTP.

Can somebody helps?

Thanks a lot!

Posts: 1

Participants: 1

Read full topic

@louza287 wrote:

I installed esri-loader with ionic 5 framework

the map is displayed on browser but after building apk to run on android device the map doesn’t show
and I got error message “EsriLoader: Error: There was an error attempting to load https://js.aecgis.com/4.14”

Posts: 1

Participants: 1

Read full topic

@ashleylaverick1 wrote:

I am looking to run my app on and android device/emulator.

I do Ionic run android and run it in android studio as per.

When it loads on the device, there is the below toast:

My understanding is that it should be using the device localhost? Why isn’t it?

I looked into the capacitor config json and see this:

{
  "appId": "io.ionic.starter",
  "appName": "MyApp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "cordova": {
    "preferences": {
      "ScrollEnabled": "false",
      "android-minSdkVersion": "19",
      "BackupWebStorage": "none",
      "SplashMaintainAspectRatio": "true",
      "FadeSplashScreenDuration": "300",
      "SplashShowOnlyFirstTime": "false",
      "SplashScreen": "screen",
      "SplashScreenDelay": "3000"
    }
  },
  "server": {
    "url": "http://192.168.0.15:8100",
    "cleartext": true
  }
}

My understanding from the capacitor docs is the “url” is used for an external server, i.e. live reload?

As a result, I cant run my app and get this:

image815×1647 118 KB

Any help would be much appreciated!

Posts: 1

Participants: 1

Read full topic

@YXUN wrote:

Hi all,

So I want to display my PDF in my ionic 4 app using https://ionicframework.com/docs/native/document-viewer
this method. However, I do not want to put it in my app www folder as it will increase my app size and that’s the last thing I want to do.

Does anyone have any kind suggestion where I can store my PDF without taking up my app space and display it in my ionic 4 app (with a native feel)?

Thank you.

Posts: 1

Participants: 1

Read full topic

@kdefombelle wrote:

I tested ion-datetime with several formats to display the time, it works fine in a normal page but in a ion-modal it always displays the default format (same as if displayFormat attribute is omitted)

in a page: OK

Screenshot 2020-04-05 at 9.55.44 PM552×630 14.9 KB

in a modal: NOK
The expected format is HH:mm but is not taken into account

Screenshot 2020-04-05 at 10.06.19 PM550×654 26.3 KB

Below the code snippet in the modal (same outcome with/without minuteValues attribute)

<ion-row>
    <ion-col>
        <ion-datetime displayFormat="HH:mm" minuteValues="0,15,30,45"
          placeholder="Select Time">
        </ion-datetime>
    </ion-col>
</ion-row>

The modal is started as follows:

async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      swipeToClose: true
    });
    return await modal.present();
}

Posts: 1

Participants: 1

Read full topic

@mphimfo wrote:

Back in 2016 I built an Ionic v1 app for a client, and the app is still in use today, unchanged. (And frankly, I’ve been mostly out of mobile app dev since 2017 due to the needs of my clients).

I received an email from Apple indicating that existing apps must be built with the iOS 13 SDK or later (among other things):

appledevnotice1352×1074 282 KB

My questions are:

• Does this apply to Ionic (hybrid) apps?
• Does this mean it will be removed from the App Store in June 2020?

I’ve done some digging but cannot find a definitive answer that I’m confident about.

I’m wondering if I’ll need to reach out to my client to update their app.

Can anyone provide some guidance? I greatly appreciate your help.

Thank you.

Posts: 1

Participants: 1

Read full topic

@kaiovm wrote:

Ionic:

Ionic CLI : 6.0.0
Ionic Framework : @ionic/angular 5.0.0
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.1.2

When I open the modal config-add-user.page.html to edit the data the ion-select “Coletor” doesn’t show any data:

001429×743 16.8 KB

However, after clicking on it, it shows that the two options are actual selected (as it should be). If I click on “OK” they will appear normally as selected itens:

002442×743 18.4 KB

config-add-user.page.html

<ion-header>

  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-button (click)="closeModal()">
        <ion-icon name="arrow-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title><b>Usuário</b></ion-title>
  </ion-toolbar>

</ion-header>

<ion-content class="ion-padding">

  <form [formGroup]="addUserGroup">
    <ion-list inset ion-no-border>

      <ion-item>
        <ion-label color="medium">Usuário:</ion-label>
        <ion-input class="ion-text-end" type="text" name="username" formControlName="username" value="{{ username }}"></ion-input>
      </ion-item>

      <br>

      <ion-item>
        <ion-label color="medium">Password:</ion-label>
        <ion-input class="ion-text-end" type="password" name="password" formControlName="password" value="{{ password }}"></ion-input>
      </ion-item>

      <br>

      <ion-item>
        <ion-label color="medium">Name:</ion-label>
        <ion-input class="ion-text-end" type="text" name="name" formControlName="name" value="{{ name }}"></ion-input>
      </ion-item>

      <br>

      <ion-item>
        <ion-label color="medium">Permissão:</ion-label>
        <ion-select class="ion-text-end" name="permission" formControlName="permission" value="{{ selectPermission }}">
            <ion-select-option value="1">Usuário</ion-select-option>
            <ion-select-option value="2">Administrador</ion-select-option>
        </ion-select>
        <ion-icon name="chevron-forward-outline" color="primary" item-end></ion-icon>
      </ion-item>

      <br>

      <ion-item>
        <ion-label color="medium">Coletor:</ion-label>
        <ion-select class="ion-text-end" multiple="true" name="idLine" formControlName="idLine" [(value)]="selectLine">
          <ion-select-option *ngFor="let item of linesList" value="{{item.id}}">
            {{ item.name }}
          </ion-select-option>
        </ion-select>
        <ion-icon name="chevron-forward-outline" color="primary" item-end></ion-icon>
      </ion-item>

      <br>
    
    </ion-list>

    <ion-row>
      <ion-col>
        <ion-button [disabled]="addUserGroup.invalid" (click)="postUser()" type="submit" expand="block" size="large">SALVAR</ion-button>
      </ion-col>
    </ion-row>

  </form>

</ion-content>

config-add-user.page.ts

/*****************************************************/
/******************* GENERAL IMPORTS *****************/
/*****************************************************/

import { UserService } from '../api/user.service';
import { Component, Input } from '@angular/core';
import { Validators, FormBuilder, FormControl } from '@angular/forms';
import { AlertController, ModalController } from '@ionic/angular';

@Component({
  selector: 'app-config-add-user',
  templateUrl: './config-add-user.page.html',
  styleUrls: ['./config-add-user.page.scss'],
})

export class ConfigAddUserPage {

  /* DATA VARIABLES */
  addUserGroup: any = {};
  linesList: Array<any>;

  /* EDIT VARIABLES */
  selectLine: Array<any>;
  selectPermission: string;

  // Data passed in by componentProps
  @Input() modal: any;
  @Input() edit: string;
  @Input() token: string;
  @Input() id: string;
  @Input() idLine: Array<any>;
  @Input() clientId: string;
  @Input() username: string;
  @Input() password: string;
  @Input() name: string;
  @Input() permission: string;

  constructor(
    public service : UserService,
    public alertCtrl: AlertController,
    public formBuilder : FormBuilder,
    public modalController: ModalController,
  ) {

      /*****************************************************/
      /****************** FORM VALIDATOR *******************/
      /*****************************************************/

      this.addUserGroup = this.formBuilder.group({
        token: new FormControl('xxxx', Validators.required),
        dns: new FormControl(this.service.getDns(), Validators.required),
        user: new FormControl(this.service.getUser(), Validators.required),
        pass: new FormControl(this.service.getPass(), Validators.required),
        clientId: new FormControl(this.service.getClientId(), Validators.required),
        id: new FormControl(this.id),
        username: new FormControl('', Validators.required),
        password: new FormControl('', Validators.required),
        name: new FormControl('', Validators.required),
        permission: new FormControl('', Validators.required),
        idLine: new FormControl('', Validators.required)
      });
  }

  /*****************************************************/
  /****************** ONINIT FUNCTIONS *****************/
  /*****************************************************/

  ionViewDidEnter() {
    this.getProductionLines();
    this.selectPermission = this.permission;
    this.selectLine = this.idLine;

    // Removing Ion Select Icons
    const ionChange = document.querySelectorAll('ion-select');
    ionChange.forEach((sel) => {
      sel.shadowRoot.querySelectorAll('.select-icon-inner')
        .forEach((elem) => {
          elem.setAttribute('style', 'display: none;');
        });
    });
  }

  /*****************************************************/
  /****************** POST OR UPDATE *******************/
  /*****************************************************/

  postUser() {
    if (this.edit == "true") {
      this.service.updateDataUser(this.addUserGroup.value)
        .subscribe(
          data=>{
            console.log(data.message);
        }, 
          err=>console.log(err)
      );
      this.modal.dismiss();
    } 
    if (this.edit == "false") {
      this.service.postDataUser(this.addUserGroup.value)
        .subscribe(
          data=>{
            if (data.search === false) {
              console.log(data.message);
              this.modal.dismiss();
            } else {
              console.log(data.message);
              this.postAlert();
            }
        },
          err=>console.log(err)
      );
      this.modal.dismiss();
    }
  }

  async postAlert() {
    const alert = await this.alertCtrl.create({
      header: 'Usuário Repetido',
      message: 'Tente outro username...',
      buttons: ['OK']
    });
    await alert.present();
  }

  /******************************************************/
  /******************* API - GET DATA *******************/
  /******************************************************/

  getProductionLines() {
    this.service.getDataProductionLines().subscribe(
      data => this.linesList = data,
      err => console.log(err)
    );
  }

  /******************************************************/
  /******************** CLOSE MODAL ********************/
  /******************************************************/

  closeModal() {
    this.modal.dismiss({
      'edit' : "",
      'token' : "", 
      'id' : "", 
      'idLine' : "", 
      'clientId' : "", 
      'username' : "", 
      'password' : "",
      'name' : "" ,
      'permission' : "",
    });
  }

}

Any ideas?

Posts: 1

Participants: 1

Read full topic

@kks21199 wrote:

Is it possible for me to run a background service with ionic? Also is it possible to revive the service, if it is killed?

In android, you can run a service with a notification to make the chances of it being killed very less since the user will be aware that the service is being run.

https://capacitor.ionicframework.com/docs/apis/background-task/

This does what I want it to do, but I don’t think it will be able to run indefinitely.

Posts: 1

Participants: 1

Read full topic

@peterkhang69 wrote:

My project compiled ok but is suddenly lagging infinitely on browser when ionic serve after npm i -g @ionic/clii and @ npm i -g anulgar/cli and npm-update-all … (edited)

$ ionic info

Ionic:

Ionic CLI : 6.4.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.901.0
@angular-devkit/schematics : 9.1.0
@angular/cli : 9.1.0
@ionic/angular-toolkit : 2.2.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

cordova-res : 0.11.0
native-run : not installed

System:

Android SDK Tools : 26.1.1 (/Users/peter/Library/Android/sdk)
NodeJS : v12.16.1 (/usr/local/bin/node)
npm : 6.14.4
OS : macOS Mojave
Xcode : Xcode 11.3.1 Build version 11C504

$ ionic serve

ng run app:serve --host=localhost --port=8100
[ ng] Warning: Entry point ‘ngx-papaparse’ contains deep imports into ‘/Users/peter/App/speechmate/node_modules/papaparse/papaparse.min.js’. This is probably not a problem, but may cause the compilation of entry points to be out of order.
::::
[ng] Date: 2020-04-05T13:59:33.900Z - Hash: f6ef92e19f864c1a9678 - Time: 23519ms
[INFO] … and 4 additional chunks
[ng] : Compiled successfully.[INFO] Development server running!Local: http://localhost:8100Use Ctrl+C to quit this process[INFO] Browser window opened to http://localhost:8100!

Posts: 1

Participants: 1

Read full topic

@Sweg wrote:

I am able to display the below button in an action sheet controller in my Ionic 5 app:

I’m just wondering is it possible to put the icon at the end of the button? So that the position’s of the text & the icon are effectively swapped?

Posts: 2

Participants: 2

Read full topic

@Sweg wrote:

In my Ionic 5 app, I am displaying some buttons inside an ActionSheetController:

cancel1694×653 20.4 KB

Here is my latest code:

onMechanicClick(mechanicId: string) {
    this.actionSheetCtrl.create({
      header: 'Choose an Action',
      buttons: [
        {
          text: 'Book Appointment',
          icon: 'calendar-outline',
          handler: () => {
            this.goToProfile(mechanicId);
          }
        },
        {
          text: 'Call Me',
          icon: 'call-outline',
          handler: () => { }
        },
        {
          text: 'Message Me',
          icon: 'mail-outline',
          handler: () => {
            this.goToConversationDetail(mechanicId);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          icon: 'close-outline',
          handler: () => { }
        },
      ]
    }).then(actionSheetEl => {
      actionSheetEl.present();
    });
  }

I would like to assign the danger color to the text & icon inside the Cancel button.

I tried creating a CSS class & assigning it below, but that is not resulting in any change.

Can someone please tell me what changes are required to do this?

{
    text: 'Cancel',
    role: 'cancel',
    icon: 'close-outline',
    cssClass: 'cancel',
    handler: () => { }
}

Component CSS:

.cancel {
color: red;
}

I also tried to put this CSS into App Component CSS, but that doesn’t work either.

Posts: 1

Participants: 1

Read full topic

@boel21 wrote:

in ionic 5 there is any problem with the ion-menu, i have a ion list using ion-item with href but it doesnt work.
I couldn’t make click on the ion item

<ion-toolbar style="text-align: center;">

 <img src="../../../assets/icon/iconOnly.png"/>

</ion-toolbar>

<ion-list>

  <ion-item href='profile-update'>

    <ion-icon name="people-outline" slot="start" color="primary"></ion-icon>

    <ion-label>Actualizar Perfil</ion-label>

  </ion-item>

  <ion-item  href='saved-offers'>

    <ion-icon name="bookmarks-outline" slot="start" color="primary"></ion-icon>

    <ion-label>Ofertas Guardadas</ion-label>

  </ion-item>

  <ion-item  href='sales'>

      <ion-icon name="cash-outline" slot="start" color="primary"></ion-icon>

      <ion-label>Empieza a Vender

      </ion-label>

  </ion-item>

  <ion-item  href='user-reports'>

    <ion-icon name="warning-outline" slot="start" color="primary"></ion-icon>

    <ion-label>Reportar Usuario</ion-label>

  </ion-item>

  <ion-item  href='contact-us'>

    <ion-icon name="mail-outline" slot="start" color="primary"></ion-icon>

    <ion-label>Contáctenos</ion-label>

  </ion-item>

  <ion-item>

    <ion-icon name="log-out-outline" slot="start" color="primary"></ion-icon>

    <ion-label>Cerrar Sesión</ion-label>

</ion-item>

</ion-list>

Posts: 1

Participants: 1

Read full topic

@karamy wrote:

Hi,

i’m developing an Ionic5 App based on tabs. As far as i understand, the caching mechanism under tab view works calling ngOnInit of a tab component only the first time entering in that state, and this is perfect for me.
The problem is that after a logout, i want to “clear” that cache to that ngOnInit of that tab is called again after login.

What is the best approach to archive this?
Thanks

Posts: 2

Participants: 2

Read full topic

@boel21 wrote:

Hello, somebody Knows if the HTML5 tag video is working on ionic 5. i want to reproduce a video wich is in the asset localy but is not working, do I have to use pluging

Posts: 1

Participants: 1

Read full topic

@kdefombelle wrote:

I do not know how to use a form in my modal, I get the message core.js:8061 Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’.

the module imports FormsModule and ReactiveFormsModule, the forms are working in pages in this module but not in the ion-modal.

Here are the import at module level

@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes)
  ],

the modal code imports the same FormsModule and ReactiveFormsModule:

import { Component, Input, OnInit } from "@angular/core";
import {
  FormsModule,
  FormControl,
  FormGroup,
  Validators,
  ReactiveFormsModule
} from "@angular/forms";
import { ModalController } from "@ionic/angular";
@Component({
  selector: "modal-page",
  templateUrl: "modal.page.html"
})
export class ModalPage implements OnInit {
  @Input() id: number;

  newGameForm: FormGroup;
  location: FormControl;

  ngOnInit() {
    console.log(`new modal page`);
  }

  constructor(private modalController: ModalController) {
    this.location = new FormControl("Default Location", [
      Validators.required,
      Validators.maxLength(255)
    ]);
    this.newGameForm = new FormGroup({
      location: this.location
    });
  }

  cancel() {
    this.modalController.dismiss({
      dismissed: true
    });
  }

  postGame() {
    if (this.newGameForm.valid) {
      console.log(this.newGameForm.value.location);
    }
  }
}

the modal is displayed via:

async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: {
        id: 1
      },
      swipeToClose: true
    });
    return await modal.present();
}

Screenshot 2020-04-06 at 2.15.32 AM1802×974 105 KB

Posts: 1

Participants: 1

Read full topic

@Kil1oGram wrote:

Hey I have this problem with my ion menu. Check its layout, it clashes with the bottom layer layout

Posts: 1

Participants: 1

Read full topic

@damtaipu wrote:

Hello, I’m looking for a mask for ion input of the form. I didn’t get anything until now, can someone help me ??
I’ve tried br-mask but return the error:
core.js:6185 ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘id’ of undefined

I need a mask that works on ionic v4.

Minha configuração:

Ionic CLI : 6.3.0 (C:\Users\DilDam\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.0.5
@angular-devkit/build-angular : 0.900.7
@angular-devkit/schematics : 9.0.7
@angular/cli : 9.0.7
@ionic/angular-toolkit : 2.2.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

Utility:

cordova-res : not installed
native-run : 0.3.0

System:

Android SDK Tools : 26.1.1 (C:\Users\DilDam\AppData\Local\Android\Sdk)
NodeJS : v12.16.1 (C:\Program Files\nodejs\node.exe)
npm : 6.14.3
OS : Windows 10

Posts: 1

Participants: 1

Read full topic

@RaghavendraKumar wrote:

I tried everything but unable to change the color of toast cancel button

this.toastCtrl.create({
message: messageInput,
position: ‘top’,
buttons: [
{
text: ‘x’,
role: ‘cancel’,
cssClass: ‘failuretoast1’,
handler: () => {
// Utils.log(‘Close clicked’);
}
}
],
cssClass: “failuretoast1”,
});

ion-toast.failuretoast1 {
color: orange !important;
–color: orange !important;
–button-color: #99226e !important;
}

.failuretoast1 {
color: orange !important;
–color: orange !important;
–button-color: #99226e !important;
}

Nothing works

Css on inspect shows - toast-button-cancel and I am not able to change the color in this.

Please help

Posts: 1

Participants: 1

Read full topic

@AvkAvk wrote:

this.plan_id = ‘M’
this.handler.open({
name: ‘NautAlert Monthly’, // Pass your application name
amount: 1500 // Pass your billing amount
});

stripe handle it open dialog box but it work in ionic 3 not in 5 any suggestion ionic developer

Posts: 1

Participants: 1

Read full topic

@erkinalan wrote:

I am developing an application with ionic 5 but I heard that it will attract iOS support. Is this rumor true?

Posts: 1

Participants: 1

Read full topic