@almi13 wrote:

Hi there,
I’m still developing under Ionic3 and CLI 3.20 on Win10 til a few days ago. This was fine for me, and with the old DevApp I was able to create screenshot with my iPhone/Android mobile. Now I had to update the cli, because ionic cordova resources did not run anymore. Now my problem: DevApp isn’t working anymore. How can I create screenshots easily?

Thanks
Alex

Posts: 1

Participants: 1

Read full topic

@max_maeuschen wrote:

I’ve update my project to capacitor 2.0 following this blog post. When I tested my app on a real device (Samsung SM-T813) the app restarts always when I’m trying to open a folder in the filesystem. Is there anyone for help? Thanks in advance.

Posts: 1

Participants: 1

Read full topic

@JEricaM wrote:

Hi, I’m developing a pwa with ionic using the Pwa Ionic Starter.
Which is the best method to disable the sidemenu on login page and enable in all the other pages?
I’m approach is:

note: noMenu it’s a prop of each page and in app-login values true

@Listen("ionRouteDidChange")
  pageNameChange() {
    this.noMenu = this.el.querySelector("ion-router-outlet > *").hasAttribute("no-menu");
    let menuToggle;
    if(this.noMenu == true){
      menuToggle = document.querySelector('ion-menu') as HTMLElement;
      menuToggle.disabled = true;
    } else {
      menuToggle = document.querySelector('ion-menu') as HTMLElement;
      menuToggle.disabled = false;
    }
  }

Thank you

Posts: 1

Participants: 1

Read full topic

@gonself wrote:

Hi!
I’m using ion-virtual-scroll to render a 50 items lists, but inside each item i used a custom component, like this:

<ion-virtual-scroll [items]="items" approxItemHeight="65px">
	<ion-item *virtualItem="let item">
		<app-avatar [info]="item"></app-avatar>
		<ion-label>
			<h2><span>{{item.text}}</h2>
		</ion-label>
	</ion-item>
</ion-virtual-scroll>

my custom component app-avatar has an ngOnInit function, but it only execute the first 22 times (i supose it depend of resolution), the rest of the items has invalid info…

¿What i’m doing worng?

If i use ion-list instead infinite-scroll all its ok

Thanks in advanced…

Posts: 1

Participants: 1

Read full topic

@Geelario wrote:

Good day Expert. Please I have a little worry if someone can help me out. I am using WordPress JWT plugins to authenticate users in my ionic 4 apps, but the issue am having is that when a user try to log in the first time it returns null, with this error message –

https://example.com/wp-json/wc/v3/customers/null?consumer_key=ck_xxxxxxxxxxxxxx&consumer_secret=cs_xxxxxxxxxxxxx.
–HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: “OK”, url: “https://example.com/wp-json/wc/v3/cu…ecret=cs_xxxxxxxxxxx”, ok: false, …}, but the local storage returns the customer data and id with a toast showing login successful. when the user tries it the second time, that’s when the user will be authenticated. But I want user to be authenticated once the login is successful

Don’t know what I have done wrong. This is my code.

login.page.ts

loginForm(){

    this.platform.ready().then(() => {

      if((this.password != '') &&  (this.CFS.validateEmail(this.email))) {

        console.log('Email: ',this.email);

        console.log('Password: ',this.password);
  
        this.auth.loginCustomer(this.email,this.password).then((response) => {

      if(response['token']){

        console.log('Returned Token: ',response['token']);

        console.log('Returned user enamil: ',response['user_email']);

        this.CFS.presentToast('Login successful', 'buttom',2000, 'success');

        this.auth.getUserData(this.email).subscribe((userData) => {

         this.customerData = userData;

          console.log('Customer Data: ', this.customerData);

         let currentUserId = this.customerData[0].id;

         localStorage.setItem('currentUserId', currentUserId);

         let found = localStorage.getItem('currentUserId');

         console.log('local storage id', found);
     
        });
          this.route.navigateByUrl('/home');
      } else {

        this.CFS.presentToast('Invalid username or password', 'buttom',2000,'danger');
      } 

    });

      } else {

        this.CFS.presentToast('Please fill  the form correctly', 'buttom',2000,'danger')

      }

    });

  }

Home.page.ts

   customerId:any;

   customerData: any = {

    avatar_url: 'not found',

  }

  constructor(private CFS: CommonfunctionService, private activatedRoute: ActivatedRoute, private auth: AuthService, private WC: WoocommerceService, private modalPop: ModalController) {

   }
     ngOnInit() {  
    let isUserLoggedIn =  localStorage.getItem('currentUserId');

    this.WC.getUserInfo(isUserLoggedIn).subscribe((data)=>{

      this.customerData = data;

      console.log('user data', this.customerData);

    }); 

    this.WC.getWalletBalance(isUserLoggedIn).subscribe((data) =>{

      this.mybalance = data;

      console.log('All Orders balance by a customer', this.mybalance);

    });
  }

please I need your assistance. Thanks

Posts: 1

Participants: 1

Read full topic

@elduderino15 wrote:

I would like to get an understanding on future plans for next ionic releases and backward compatibility. I really like the framework but right now I am in the midst of migrating the same app for the second time . Ion 1 -> Ion 3 -> Ion 5 ( I like odd numbers ). I must admit the missing backward compatibility is really frustrating. I thought the switch from python 2 to 3 was tough, but given the fact that the frameworks seems to be changing significantly and relatively quick in time, I’d rather find me another SDK and migrate once. Thoughts?

Will this improve over time?

Posts: 1

Participants: 1

Read full topic

@WoAiNii wrote:

I’m using the latest version of InAppBrowser, in a Ionic hybrid multiplatform app, but I’m having some problems copying text from Android device (e.g. from a generic web page) and pasting it in the web app, opened from InAppBrowser.
This works fine on iOS, but when I try on Android, even if I keep touch pressed, nothing appeared, paste menu or anything else.
Did I need others plugin, on Android, to achieve that? I just can’t confirm if this basic feature is supposed to work or not on a InAppBrowser Android app. Any help would be very appreciated.

Thanks.
Regards,
Matteo

Posts: 1

Participants: 1

Read full topic

@thiagoprz wrote:

I’ve recently upgraded to a new server with the most recent MacOS on MacinCloud (since i don’t own a Macbook or IMac), now using the XCode 11.4 i’m not able to distribute my Ionic 3 app. With the old version (Mojave and XCode 11.3) i was able to distribute it normally, but now since Apple Store will not accept distribution of apps without the iOS 13 SDK or later i’m having this issue, can somebody help?
I am able to test it on any Simulator but when i try to archive it XCode shows “Found an unexpected Mach-O header code: 0x72613c21”.

My Ionic info:

Ionic:

   Ionic CLI          : 5.4.13 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 6.3.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-webview 1.1.1, (and 29 other plugins)

Utility:

   cordova-res (update available: 0.12.0) : 0.8.1
   native-run                             : not installed

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v12.13.1 (/usr/local/bin/node)
   npm        : 6.13.6
   OS         : macOS Catalina
   Xcode      : Xcode 11.4 Build version 11E146

My plugin list (it’s a big app ):

call-number 0.0.2 "Cordova Call Number Plugin"
com.telerik.plugins.nativepagetransitions 0.6.5 "Native Page Transitions"
com.thiagoprz.imagepicker 2.1.11 "ImagePicker"
cordova-android-play-services-gradle-release 1.3.0 "cordova-android-play-services-gradle-release"
cordova-google-api-version 0.0.1 "cordova-google-api-version"
cordova-plugin-add-swift-support 1.7.1 "AddSwiftSupport"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-badge 0.8.7 "Badge"
cordova-plugin-camera 4.0.2 "Camera"
cordova-plugin-device 1.1.7 "Device"
cordova-plugin-facebook4 1.9.1 "Facebook Connect"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-file-opener2 2.0.19 "File Opener2"
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-filechooser 1.0.1 "File Chooser"
cordova-plugin-filepath 1.0.2 "FilePath"
cordova-plugin-filepicker 1.1.4 "File Picker"
cordova-plugin-firebase 1.0.5 "Google Firebase Plugin"
cordova-plugin-fullscreen 1.1.0 "cordova-plugin-fullscreen"
cordova-plugin-geolocation 3.0.0 "Geolocation"
cordova-plugin-googleplus 5.2.3 "Google SignIn"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-inapppurchase 1.1.0 "In App Purchase"
cordova-plugin-ionic-webview 1.1.19 "cordova-plugin-ionic-webview"
cordova-plugin-ios-disableshaketoedit 1.0.0 "iOS Disable Shake to Edit"
cordova-plugin-local-notification 0.9.0-beta.2 "LocalNotification"
cordova-plugin-nativegeocoder 3.1.1 "NativeGeocoder"
cordova-plugin-network-information 2.0.1 "Network Information"
cordova-plugin-splashscreen 4.1.0 "Splashscreen"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-x-socialsharing 5.3.2 "SocialSharing"
cordova-sqlite-storage 2.3.0 "Cordova sqlite storage plugin"
cordova.plugins.diagnostic 3.9.2 "Diagnostic"
es6-promise-plugin 4.2.2 "Promise"
ionic-plugin-keyboard 2.2.1 "Keyboard"
onesignal-cordova-plugin 2.4.1 "OneSignal Push Notifications"

My Podfile:

platform :ios, '10.0'

target 'Beemob' do
  project 'Beemob.xcodeproj'
  pod 'OneSignal', '>= 2.11.2', '< 3.0'
end

target 'OneSignalNotificationServiceExtension' do
  pod 'OneSignal', '>= 2.11.2', '< 3.0'
end

I searched a lot on the web and couldn’t find a solution to this problem, usually this error must be related to the desktop or Podfile, but nothing helped.

Posts: 1

Participants: 1

Read full topic

@mozpider wrote:

I am learning ionic and it has been very smooth sailing. However, I have so far not found any article on recommended practices for HTML markups.

Can I use any valid HTML markup in my templates ? Such as schema.org/JSON-LD markup for SEO, and ARIA attributes.

Do some markup break the web components ?

Can you please post a link to an article like that ? Specifically, I am looking for “Best practices”.

Posts: 1

Participants: 1

Read full topic

@sakotturi wrote:

I have an ionic v5 app deployed to the web via firebase. This morning I found the font-weights aren’t being respected by google chrome. macOS Safari and iOS Safari are normal still (as Chrome had been for the past month while building this site)

https://santekotturi.com/

Here’s an ion-card with an ion-card-title element with font-weight set to 900.

Do I need to do something additional to use the default ionic font? New font file format for Chrome?

I created a new ionic tabs app and served it to chrome and font weights ARE respected there but I’m not serving that from firebase.

It’s quite possible it has something to do with my code BUT it was fine for 1+ month, I changed nothing overnight and now its different.

If anyone has any insights, seen this before etc, please let me know!

CHROME:

image2944×1790 1.23 MB

SAFARI:

image3070×1806 1.4 MB

I noticed chrome changed the font of their url bar:

image760×74 3.57 KB

Posts: 1

Participants: 1

Read full topic

@kks21199 wrote:

I have followed the docs here, https://capacitor.ionicframework.com/docs/plugins/ and made a plugin.

Is there any way I can use this plugin without publishing it to npm? How can I locally add a capacitor plugin

Posts: 2

Participants: 2

Read full topic

@Sweg wrote:

When I navigate to a page in my Angular app, I am displaying data as expected using the below methods:

conversationsSub: Subscription;
usersSub: Subscription;
conversation: Conversation;
loadedMessages: Message[];

ngOnInit() {
    this.loadMsg();
  }

loadMsg() {
    this.route.paramMap.subscribe(paramMap => {
      this.conversationsSub = this.conversationsService
        .getConversation(paramMap.get('conversationId'))
        .subscribe(conversation => {
          console.log('Conversation values: ', this.conversation);
          this.conversation = conversation;
          this.loadedMessages = [...this.conversation.messages];
          this.usersSub = this.usersService.getUserByUserId(this.conversation.mechanicId).subscribe(
            user => {
              this.mechanicName = user.name;
            });
        });
    });
  }

ionViewWillEnter() {  
    this.loadMsg();
}

Here is some Conversations.Service code, I can provide more if required:

 getConversation(id: string) {
    return this.conversations.pipe(
      take(1),
      map(conversations => {
        return { ...conversations.find(conversation => conversation.id === id) };
      }));
  }

However, when I refresh the page, here is what’s happening:

1. No data is displaying on the page
2. console.log('Conversation values: ', this.conversation); is empty
3. I also get this console error this.conversation.messages is not iterable

The aboe error is in relation to this.loadedMessages = [...this.conversation.messages]; inside my loadMsg()

Can someone please tell me why this is fine when I first navigate to the page, but is causing issues when I reload?

Posts: 2

Participants: 2

Read full topic

@kendam wrote:

I have successfully implement a playlist feature for a Cordova Media plugin (https://github.com/apache/cordova-plugin-media) in my application .

However, on IOS, once the app screen is locked the current playlist item completes but it won’t move on to the next item .

I tried to use the cordova-plugin-background-mode but this didn’t solve my problem or I don’t know how to make it solve my issue.
Below is my code

ionViewDidLoad(){
    this.backgroundMode.enable();
  }
PlayAllList(i, tracks: AudioFile[],surah) {
   
    var self = this;
  
    let fileDir = "";
    if(this.plt.is('android')){
      fileDir = this.file.externalDataDirectory
     }
     else{
       fileDir = this.file.documentsDirectory.substr(7)
     }
    this.Audiofile = this.media.create(fileDir + tracks[i].trackUrl);
   
    this.Audiofile.play({playAudioWhenScreenIsLocked:true})
   
    this.Audiofile.onSuccess.subscribe(() => {
      if ((i + 1) == tracks.length) {
       this.Notplaying = true;
        this.Audiofile.release(); 
      this.Audiofile = undefined;
  
      } else {
       
      
        this.Audiofile.release()
      
        self.PlayAllList(i + 1, tracks,surah)
      }

    })
  
  }

I have been on this for days. any suggestion will be appreciated

Posts: 1

Participants: 1

Read full topic

@karvanj wrote:

Hi everyone would appreciate people thoughts on this. We have built an app on the Ionic framework where part of the app is a form creator where users can can create customs forms to capture data and record in our database.

Part of the form feature is allowing formula calculations based on fields. Currently it allows for basic arithmetic expressions where the expressions goes through a parser.

Whilst we can work on building no-code style formulas expressions to do a range of operations but realistically there always going to be something that someone needs that can’t be cover (eg loops, complex if/else statements).

Therefore we are now exploring the implementation of users (pref admin users of the customer) to implement their own client side scripts. A typical script example would be:

user script saved as string

if (fnGetFieldValue('FIELD1') === fnGetFieldValue('FIELD2')) 
  {
    setFnFieldValue('FIELD3')= 'PASS'
  }

App script function

runScript() {
   function fnGetFieldValue(id) {
      // some code
     return value
   }
   setFnFieldValue(id) {
    // some code
   }
   let script: string = this.getUserScript();
   this.DomSanitizer.bypassSecurityTrustScript(script)

}

where the script would have access to a set of defined functions (eg fnGetFieldValue) to retrieve data rather than open slate to all the app’s api.

We understand companies such as squarespace, zoho, powerapps and many other low code solutions allows for custom client API scripting.

The concern we have is security vulnerabilities such as XSS. As our app is not on the open market (ie B2B only) the risk is lower but anycase we are considering of having an approval of the scripts created by users. But given there are many other companies having this feature without any approval process I would very much like to hear other peoples thoughts on this and whether there are strategies that can be implemented to allow of safe implementation of Client side scripts? For example are there a list of functions we could prevent from executing by removing from the script(sanitizer) eg document, eval, window etc?

Thanks in advance.

Posts: 1

Participants: 1

Read full topic

@arnotixe wrote:

Writing an ionic 4 + capacitor app.

I’m NOT interested in sending SMS in the background or anything. Just a simple “contact this person” page, invoking whatever is the default app for the functions:

Call: <a href="tel:+4712345678">number</a>
SMS: <a href="sms:+4712345678">number</a>
mail: <a href="mailto:mail@example.com">mail</a>

tel: and mailto: work, but sms: results in “unsafe:sms:+4712345678” (in browser). On the phone it probably is the same, cause nothing happens.

config.xml says (this was default when initing)

I’ve seen something on sanitizing href, but can’t figure out if it can/should be fiddled with in ionic?

Can’t see how sms: could be considered a dangerous thing to link in ionic?

Posts: 1

Participants: 1

Read full topic

@jakesully wrote:

I need to have calendar date picker in my ionic app. still im using <input type="date">. please help me.

Posts: 1

Participants: 1

Read full topic

@mixuala wrote:

I’ve got 3 on my page,

1. LoadingController on ionViewDidEnter
2. ionInfiniteScrollContent with ionInfiniteScroll, and
3. ionSpinner[ngIf=doFilter] when the user applies a filter the query request

Has anyone found an easy way to consolidate all these loading indicators into just one? It seems to me if I can manually trigger ionInfiniteScrollContent, that would be fine. It is the one that is most active.

Posts: 1

Participants: 1

Read full topic

@fpolimen wrote:

I just restarted to play with Ionic-framework after some years.

I wold like to create a demo of an Idea, deployed as an App on few real devices (Ios and Android) that uses Camera, Gps and Bluetooh.

I remember that few years ago I could use Cordova-plugins and Ionic View and it was easy.

Is it possible achieve that goal with the current Ionic-framework? and how?

I tried to start with the photo-galley demo app, but when I try to deploy the App to the iphone it fails. (does it need the Apple Developer annual subscription?)

Now I’m evaluating Appflow as an alternative of the old process supported by Ionic framework with the Ionic View app shell.

Posts: 1

Participants: 1

Read full topic

@Pratikjaiswa15 wrote:

I am going through a strange issue. I am using SMS receiver plugin to read otp and auto-fill it without any user interaction.

But when I fetch otp from the message it is not getting displayed even though I have used ngModel for it.

If I manually change the value in ngOnint() it is getting displayed on view, but it is not working inside SMS receive function.

I have checked console.logs the value is there.

The start() function in the following code is called after the message is sent.
Thank you in advance

.html

<ion-row class="OTP-border">
          <ion-col>
            <div>
              <ion-input  type="tel" maxlength="1"  [(ngModel)] ="otpArray.first" >
              </ion-input>
            </div>
          </ion-col>
          <ion-col>
            <div>
              <ion-input  type="tel"  maxlength="1" [(ngModel)] ="otpArray.second" >
              </ion-input>
            </div>
          </ion-col>
          <ion-col>
            <div>
              <ion-input  type="tel"  maxlength="1" [(ngModel)] ="otpArray.third" >
              </ion-input>
            </div>
          </ion-col>
          <ion-col>
            <div>
              <ion-input  type="tel"  maxlength="1" [(ngModel)] ="otpArray.fourth" >
              </ion-input>
            </div>
          </ion-col>
        </ion-row>
.

.ts

otpArray : any = {
    first : '',
    second : '',
    third : '',
    fourth : '',
 }


start() {
  SMSReceive.startWatch(
    () => {
      console.log('watch started');
      document.addEventListener('onSMSArrive', (e: any) => {
        console.log('onSMSArrive()');
        var IncomingSMS = e.data;

        this.processSMS(IncomingSMS);
      });
    },
    () => { console.log('watch start failed') }
  )
}

processSMS(data) {

  const message = data.body;
  if (message) {
    this.otpArray.first = data.body.slice(0, 1);
    this.otpArray.second = data.body.slice(1, 2);
    this.otpArray.third = data.body.slice(2, 3);
    this.otpArray.fourth = data.body.slice(3, 4);


    console.log("otp")
    console.log(this.otpArray.first); // output 1
    console.log(this.otpArray.second); // output 2
    console.log(this.otpArray.third); // output 3
    console.log(this.otpArray.fourth); // output 4



  }
}

Posts: 1

Participants: 1

Read full topic

@RomnEmpire wrote:

Hi team,
I have added sidemenu in my app but problem after login menu button not visible in the html section but after refresh page its working.

I have create common component for header and put header in inside the page.please chek below code :

//Toggle for home page
 <ion-header> 
  <custom-header></custom-header>
    <div col-2 class="menu_container">
        <button ion-button menuToggle>
             <ion-icon name="menu"></ion-icon>
       </button> 
    </div>
</ion-header>

//app.html
 <ion-menu [content]="content" id="menu-avatar">
  <ion-content  class="side_menu">
     <div tappable #header class="user_wrap_detail">
      <ion-row>
        <ion-col>
          <img class="user-avatar round" [src]="currentUserObject.photo"/>

        </ion-col>
      </ion-row>
    </div>
    <ion-list no-lines margin-top> 
        <button tappable menuClose *ngFor="let p of pages" 
          [class.highlight]="p.active" (click)="openPage(p)"> 
          <div id="sideMenuText">   
             {{p.title | translate}}
          </div>
        </button>
    </ion-list>
  </ion-content>
</ion-menu>

Tried Solution:

1. During push i have enable menu to true;
   this.menuCtrl.isEnabled()
2. this.appCtrl.getRootNavs()[0].push(SecondPage);

tell me above how to fix above issue?

Posts: 1

Participants: 1

Read full topic