When User is Trying to enter Content from Clipboard I need to Prevent it from entering into input or Disable Clipboard in Keyboard itself
↧
How to Disable Clipboard Content Restriction into Input field
↧
White screen with iOS 16.2
see if this helps
↧
↧
Recommended method for "Sign in with Google" + Firebase Auth on Capacitor?
For Google auth, you could look at Capgo’s new plugin - GitHub - Cap-go/capacitor-social-login: One plugin to make login with Google,Apple,Facebook and so on, simple and fast to implement.
Fore Firebase, the one you linked by Capawesome should be a good option @capacitor-firebase/authentication.
↧
Styling all parts of component?
In general, most UI frameworks are opinionated so they don’t usually provide a way to customize every little thing. If you find yourself doing heavy customization, maybe just create your own custom component for your specific use case?
Last resort is using JS to customize the CSS in the Shadow DOM.
↧
How to get x-y position of setOnMarkerClickListener call?
Another year has passed and still appears to be an issue - I am unable to find a solution to this.
Using Capacitor v7 with latest Ionic-Angular, and Google Maps plugin does not have any way to show an InfoWindow on the map?
↧
↧
How can i integrate chatbot using https://www.teneo.ai/ in ionic3 apps
ntegrating MobileFirst Foundation 8.0 into an Ionic 3 app follows a similar process to previous versions, like 6.0. The steps remain largely the same, so you can try this approach, and if it works, great! If not, feel free to adjust as needed.
Prerequisites
Before you begin, ensure you have the following installed:
- Node.js and npm (Download and install from Node.js official site)
- Teneo CLI – Install it globally by running:
bash
CopyEdit
npm install -g mfpdev-cli
- Ionic 3 and Cordova – Install the latest versions with:
bash
CopyEdit
npm install -g cordova ionic
Setting Up the Ionic 3 Project
Once the installations are complete, create a new Ionic 3 project with a blank template:
bash
CopyEdit
ionic start MFPUserLogin blank
Adding the Required Plugin
After setting up the project, proceed to download and integrate the necessary plugins for MobileFirst Foundation and ai chatbot development services. Several chatbot development providers specialize in Ionic 3 apps, so you may also explore third-party solutions if needed.
Let me know if you need any modifications or additional details!
↧
Has anyone tried to upgrade an old ionic3 project to the latest version using Cursor, the AI IDE?
Has anyone tried to upgrade an old ionic3 project to the latest version using Cursor, the AI IDE?
↧
How to change the font color of the label displayed as "Email"
<ion-item>
<ion-input label="Email" placeholder="email@domain.com">
<ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
<ion-button fill="clear" slot="end" aria-label="Show/hide">
<ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
</ion-button>
</ion-input>
</ion-item>
How to change the font color of the label displayed as “Email”
↧
Call-number plugin not working in ios 18
Also not working for me :\
↧
↧
Filesystem.writeFile not working for me with capacitor 6. Please help me out
Here I am sharing my package.json and my code block.
"dependencies": {
"@capacitor/android": "^7.0.1",
"@capacitor/app": "6.0.2",
"@capacitor/core": "^7.0.1",
"@capacitor/filesystem": "^6.0.2",
"@capacitor/haptics": "6.0.2",
"@capacitor/keyboard": "6.0.3",
"@capacitor/network": "^6.0.3",
"@capacitor/status-bar": "6.0.2",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@ionic/react": "^8.4.1",
"@ionic/react-router": "^8.4.1",
"@mui/icons-material": "^6.2.1",
"@mui/material": "^6.2.1",
"@mui/styles": "^6.2.1",
"@mui/x-date-pickers": "^7.23.3",
"@react-spring/web": "^9.7.5",
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.3.3",
"dayjs": "^1.11.13",
"ionicons": "^7.4.0",
"moment": "^2.30.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-quill": "^2.0.0",
"react-router": "^5.3.4",
"react-router-dom": "^5.3.4"
},
"devDependencies": {
"@capacitor/assets": "^3.0.5",
"@capacitor/cli": "^6.2.0",
"@testing-library/dom": ">=7.21.4",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"@vitejs/plugin-legacy": "^5.0.0",
"@vitejs/plugin-react": "^4.0.1",
"cypress": "^13.5.0",
"eslint": "^8.35.0",
"eslint-plugin-react": "^7.32.2",
"jsdom": "^22.1.0",
"terser": "^5.4.0",
"typescript": "^5.1.6",
"vite": "~5.2.0",
"vitest": "^0.34.6"
}
const createOfflineResponseDataFile = async () => {
try {
// Check for write permission
const permissionStatus = await Filesystem.checkPermissions();
alert("Permission status:" + JSON.stringify(permissionStatus));
if (permissionStatus.publicStorage !== "granted") {
const requestStatus = await Filesystem.requestPermissions();
if (requestStatus.publicStorage !== "granted") {
throw new Error("Write permission not granted");
}
}
const result = await Filesystem.writeFile({
path: OFFLINE_RESPONSE_DATA_FILE,
data: JSON.stringify({}), // Initial empty data
directory: Directory.Documents,
encoding: Encoding.UTF8,
});
if (result) {
return {
status: true,
message: "File created successfully",
result,
};
}
} catch (e) {
alert("Unable to create file" + (e as any).message);
return {
status: false,
message: "Failed to create file",
error: e,
};
}
};
Filesystem.checkPermissions() method returning publicStorage: “granted” but unable to write file. Testing on android 13. Device samsung.
↧
How to change the font color of the label displayed as "Email"
Your best bet is using the Label Slot.
↧
Filesystem.writeFile not working for me with capacitor 6. Please help me out
First off, you need to fix your mismatch versions of Capacitor. You’ve got @capacitor/android and @capacitor/core v7 but @capacitor/filesystem and others v6.
↧
Capacitor 6 Issues with capacitor-firebase/authentication on IOS
Same issue with Capacitor 7. I implemented the fix mentioned here but still no luck.
Error:
Loading app at capacitor://localhost…
[ FirebaseAuthentication ] <CapacitorFirebaseAuthentication.RuntimeError: 0x3010c7500>
↧
↧
Capacitor 6 Issues with capacitor-firebase/authentication on IOS
Have you made sure you are running v7 of the @capacitor-firebase/authentication plugin?
↧
Capacitor 6 Issues with capacitor-firebase/authentication on IOS
Here are my versions:
"@capacitor-firebase/authentication": "^7.0.0",
"@capacitor/android": "^7.0.0",
"@capacitor/browser": "^7.0.0",
"@capacitor/core": "^7.0.1",
"@capacitor/ios": "^7.0.1",
↧
Load styles in Ionic dynamically from a file downloaded via http
First of all, sorry for my English…
I’m trying to develop an Ionic app with Capacitor using standalone Angular.
I would like it to have pre-established styles by default and for them to be declared in my variables file within the theme folder.
At the beginning of loading the app I check whether or not it is configured to redirect to the configuration page in the ‘/config’ path to collect some user values and download its configuration file:
private async ionViewDidEnter(): Promise<void> {
Promise.all([
this._services._storage.getItem('configClient', true),
this._services._storage.getItem('news', true),
this._services._storage.getItem('chg_pin', true),
this._services._storage.getItem('user', true),
this._services._storage.getItem('remember', true),
])
.then(async (responses) => {
// Show configuration page or not if it is the first time you connect.
if(responses[0] == null) {
this._services._router.navigate(['/config']);
}else {
// Loading client settings and styles if you have ever connected
await this._services._configuration.getStorageClientConfig();
}
})
.catch((e) => {
console.error('ErrorInitLogin', e.message);
})
.finally(() => {
this._services.splashscreen.hide();
});
}
If you do not have previous configuration:
public async sendConfig(configForm): Promise<void> {
if(this.configForm.invalid) return;
await this._services._loading.showLoading(this._services._translate.instant('pages.configuration.sending_data'), 0);
this._services._configuration.initClientConfig()
.then(() => {
this._services._loading.dismiss();
this._services._menu.swipeGesture(true, 'menu-ctx');
this._services._router.navigate(['login']);
})
.catch(() => {
this._services._loading.dismiss();
this._services._toast.showToast(this._services._translate.instant('pages.configuration.error_sending_data'), 'bottom', 'danger');
});
}
Then I call a configuration service that downloads a configuration file for that user from an ftp server.
public initClientConfig(): Promise<boolean> {
return new Promise((resolve, reject) => {
// Recover Settings from Server
this.getConfig()
.then((response) => {
// Set Servers
this.setAppServer();
// Initialize Modules
this.setAppModules();
resolve(true);
});
});
}
The service downloads the file as follows:
public getConfig(): Promise<ConfiguracionCliente> {
return new Promise((resolve) => {
this._http.send(
this.currentClient.url,
'GET',
{},
[
{
"x-auth-header": "**********************************"
}
]
)
.then(async (response: ConfiguracionCliente) => {
this.clientConfig = response;
if(this.clientConfig && !GenericMethods.isNullOrEmpty(this.clientConfig.build)) {
this._storage.setItem('configClient', this.clientConfig, true);
this._theme.initClientTheme(this.clientConfig);
if(this.clientConfig.servers?.length > 0) {
this._server.servers = this.clientConfig.servers;
}
if(this.clientConfig.modulos?.length > 0) {
this._modules.arrayModules = this.clientConfig.modulos;
}
if(!GenericMethods.isNullOrEmpty(this._app.appInfo.version) && (this._app.appInfo.version < this.clientConfig.version)) {
this.showPermissions = true;
const version = await this._modal.create({
component: ModalVersion,
id: 'version',
initialBreakpoint: 1,
breakpoints: [0, 1],
backdropDismiss: false
});
await version.present();
}
}
resolve(this.clientConfig);
})
.catch((e) => {
console.error('ErrorGetClientConfig: ', e.message);
this.getStorageClientConfig()
.then((response) => {
if(response) {
resolve(this.clientConfig);
}else {
resolve(null);
}
})
});
})
}
From that file I get the name of the client, its logo, servers, modules and a property with the styles as follows
{
"version": "3.0.0",
"build": 81,
"usuario": "NombreUsuario",
"logo": "https://url_que_apunta_al_logo",
"servers": [
{...},
{...}
],
"modules": [
{...},
{...}
],
"theme": {
"primary": "#FF6600 !important",
"primary-rgb": "255,102,0 !important",
"primary-contrast": "#ffffff !important",
"primary-contrast-rgb": "0,0,0 !important",
"primary-shade": "#e05a00 !important",
"primary-tint": "#ff751a !important",
"secondary": "#FF8D00 !important",
"secondary-rgb": "255,141,0 !important",
"secondary-contrast": "#ffffff !important",
"secondary-contrast-rgb": "0,0,0 !important",
"secondary-shade": "#e07c00 !important",
"secondary-tint": "#ff981a !important",
"tertiary": "#FFC299 !important",
"tertiary-rgb": "255,194,153 !important",
"tertiary-contrast": "#ffffff !important",
"tertiary-contrast-rgb": "0,0,0 !important",
"tertiary-shade": "#e0ab87 !important",
"tertiary-tint": "#ffc8a3 !important",
"success": "#439467 !important",
"success-rgb": "67,148,103 !important",
"success-contrast": "#ffffff !important",
"success-contrast-rgb": "255,255,255 !important",
"success-shade": "#3b825b !important",
"success-tint": "#569f76 !important",
"warning": "#FF8D00 !important",
"warning-rgb": "255,141,0 !important",
"warning-contrast": "#000000 !important",
"warning-contrast-rgb": "0,0,0 !important",
"warning-shade": "#e07c00 !important",
"warning-tint": "#ff981a !important",
"danger": "#CE352C !important",
"danger-rgb": "206,53,44 !important",
"danger-contrast": "#ffffff !important",
"danger-contrast-rgb": "255,255,255 !important",
"danger-shade": "#b52f27 !important",
"danger-tint": "#d34941 !important",
"dark": "#222222 !important",
"dark-rgb": "34,34,34 !important",
"dark-contrast": "#ffffff !important",
"dark-contrast-rgb": "255,255,255 !important",
"dark-shade": "#1e1e1e !important",
"dark-tint": "#383838 !important",
"medium": "#999999 !important",
"medium-rgb": "153,153,153 !important",
"medium-contrast": "#000000 !important",
"medium-contrast-rgb": "0,0,0 !important",
"medium-shade": "#878787 !important",
"medium-tint": "#a3a3a3 !important",
"light": "#f7f7f7 !important",
"light-rgb": "247,247,247 !important",
"light-contrast": "#000000 !important",
"light-contrast-rgb": "0,0,0 !important",
"light-shade": "#d9d9d9 !important",
"light-tint": "#f8f8f8 !important",
"header": "#e05a00 !important",
"header-rgb": "224,90,0 !important",
"header-contrast": "#ffffff !important",
"header-contrast-rgb": "255,255,255 !important",
"header-shade": "#c54f00 !important",
"header-tint": "#e36b1a !important"
}
}
The configuration service, once the file is downloaded, calls the theme service to start the theme configuration with the values brought from the downloaded file as follows:
public initClientTheme(clientConfig: ConfiguracionCliente): Promise<boolean> {
return new Promise((resolve) => {
if(clientConfig && clientConfig.theme) {
this.nameEmpresa = clientConfig.empresa;
this.logo = clientConfig.logo;
this.temaCliente = clientConfig.theme;
this.ngZone.run(() => {
Object.keys(this.temaCliente).forEach((key) => {
this.render.setStyle(document.documentElement, `--ion-color-${key}`, this.temaCliente[key]);
});
});
resolve(true);
}else {
console.error('ErrorInitClientTheme');
resolve(false);
}
console.log(`--ion-color-primary: ${JSON.stringify(document.documentElement.style)}`);
});
}
The fact is that in that last ‘console.log(–ion-color-primary: ${JSON.stringify(document.documentElement.style)})’ it prints the values of the :root with the variables and values brought from the configuration file, but it is not rendered with the new colors, but with the previous ones…
Any ideas on how to dynamically change the styles of the application based on the downloaded file and how to make it persistent so that those styles are loaded whenever the app is reopened once configured to start?
Thanks guys!!!
I would like to know if any of you can think of how I can download that configuration file and with it configure my application based on the logged in user, placing their styles and making them persistent whenever the application is reopened.
Someone know any guide? Thanks in advance!!
↧
Capacitor 6 Issues with capacitor-firebase/authentication on IOS
There is an open issue about this over here - bug: Not compatible with iOS 16.2 · Issue #817 · capawesome-team/capacitor-firebase · GitHub
↧
↧
Capacitor 6 Issues with capacitor-firebase/authentication on IOS
Appreciate the quick response. I’ll follow that issue although that seems related to iOS 16 specifically. I’m testing on 17 and 18. I can add that to the issue.
Do you know if the changes to auth mentioned in the post below are still relevant in the current version? I tried implementing the logic related to indexedDBLocalPersistence but still no luck. I ask because this dates back to Capacitor 3 and I didn’t see any reference to this in the current implementation guides.
↧
Capacitor 6 Issues with capacitor-firebase/authentication on IOS
I have no idea 
I don’t use Firebase Auth. Your best bet will be replying to the issue linked so Robin can help, the maintainer of the plugin.
↧
Support JAVA 21 for latest Capacitor v7 support
Hey @julio-ionic - was the new build stack deployed? Does Appflow now support Capacitor v7?
↧
