This is a migrated thread and some comments may be shown as answers.

DataForm invisible on iOS

8 Answers 96 Views

DataForm

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Marc asked on 08 May 2017, 01:11 PM

Hi,

I try to use the DataForm component in our app. While the dataForm works as expected for me on Android, I have some trouble on iOS, because the DataForm is just invisible on iOS.

Here is my testing environment:

Telerik AppBuilder 3.7.3
NativeScript 2.5 (tns-core-modules 2.5.2)
Android device: Moto X Play (Android 6.0.1), as well as some Emulators in AVD Manager
iOS device: iPhone 4S (iOS 8.4)

And here is what I am doing:

<Page xmlns:df="nativescript-telerik-ui-pro/dataform" navigatedTo="pageRegisterNavigated">

<Page.actionBar>

<ActionBar title="Register" />

</Page.actionBar>

<ScrollView>

<StackLayout>

<df:RadDataForm id="registerDataForm"source="{{ registerFormData }}">

<df:RadDataForm.properties>

<df:EntityProperty name="nickname" displayName="Nickname" hintText="Nickname..." index="0">

<df:EntityProperty.editor>

<df:PropertyEditor type="Text" />

</df:EntityProperty.editor>

</df:EntityProperty>

<df:EntityProperty name="email1" displayName="Email" hintText="Email..." index="1">

<df:EntityProperty.editor>

<df:PropertyEditor type="Email" />

</df:EntityProperty.editor>

</df:EntityProperty>

<df:EntityProperty name="email2" displayName="Confirm email" hintText="Confirm email..." index="2">

<df:EntityProperty.editor>

<df:PropertyEditor type="Email" />

</df:EntityProperty.editor>

</df:EntityProperty.validators>

</df:EntityProperty>

<df:EntityProperty name="password1" displayName="Password" hintText="Password..." index="3">

<df:EntityProperty.editor>

<df:PropertyEditor type="Password" />

</df:EntityProperty.editor>

</df:EntityProperty>

<df:EntityProperty name="password2" displayName="Confirm Password" hintText="Confirm Password..." index="4">

<df:EntityProperty.editor>

<df:PropertyEditor type="Password" />

</df:EntityProperty.editor>

</df:EntityProperty.validators>

</df:EntityProperty>

<Button text="Register" tap="register" className="btn-primary" />

</StackLayout>

</ScrollView>

</Page>

//register.js

var vmModule = require("./register-view-model");

var page;

var registerDataForm; //dataform instance

exports.pageRegisterNavigated = function(args) {

page = args.object;

page.bindingContext = vmModule.vmRegister;

registerDataForm = page.getViewById('registerDataForm');

};

//register-view-model

var observableModule = require("data/observable");

var vmRegister = new observableModule.Observable({

statusWorking: false,

completed: false,

registerFormData: {

nickname: "",

email1: "",

email2: "",

password1: "",

password2: ""

}

);

I know that the viewmodels in the samples from the docs are structured a little bit different, but this is the way I structured all the pages in my app and I tried to re-use it here as well. I just do not understand why it works on Android and not on iOS, where the form is just not displayed. I also removed all the EntityProperty definitions from the XML, so I expected the app to display the default editor for each property, but this leads to the same result on iOS: no editor is visible.

Can you reproduce this issue and can you tell me what I am doing wrong? I am thankful for any advice.

Best regards,

Marc

8 Answers, 1 is accepted

answered on 09 May 2017, 08:06 AM

Hello Marc,

There are a couple of reasons your source might not be loaded in your iOS application.

The first one is how you are creating your source for your RadDataForm. As of version 2.5 of NativeScript.The Observable constructor that accepts object literal is deprecated and is now obsolete in NativeScript 3.0.0. This is not only a breaking change for all users who are migrating to 3.0.0 but also a recommendation for projects with 2.5.0, and it means that instead of creating your Observable with



var vmRegister = new observableModule.Observable(someObj) // obsolete syntax

Use this instead (available in NativeScript 2.5.x and above)

import { fromObject } from "data/observable";

var vmRegister = fromObject({

statusWorking: false,

completed: false,

registerFormData: {

nickname: "John Smith",

email1: "test@gmail.com",

email2: "test@gmail.com",

password1: "somePass",

password2: "somePass"

}

});

With the fromObject method, you will receive an Observable object, and it's nested properties will also be Observable

The second thing I've noticed tins in your XML layouts.In iOS, the Stack layout will take just enough space to visualize its children, but if its children do not have any predefined space, it won't be visible (as it won't take space). You can either provide height for your RadDataForm or nested in a layout with height pre-defined (for example using DP or with setting to take all available space). Based on your example there were also some syntax errors in the XML for (missing closing tags)so after some revision, I was able to show your form using the fromObject discussed above and the following XML snippet

<Page xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:df="nativescript-telerik-ui-pro/dataform" xmlns="http://www.nativescript.org/tns.xsd">

<GridLayout rows="*, auto">

<df:RadDataForm row="0" id="registerDataForm" source="{{ registerFormData }}">

<df:RadDataForm.properties>

<df:EntityProperty name="nickname" displayName="Nickname" hintText="Nickname..." index="0">

<df:EntityProperty.editor>

<df:PropertyEditor type="Text" />

</df:EntityProperty.editor>

</df:EntityProperty>

<df:EntityProperty name="email1" displayName="Email" hintText="Email..." index="1">

<df:EntityProperty.editor>

<df:PropertyEditor type="Email" />

</df:EntityProperty.editor>

</df:EntityProperty>

<df:EntityProperty name="email2" displayName="Confirm email" hintText="Confirm email..." index="2">

<df:EntityProperty.editor>

<df:PropertyEditor type="Email" />

</df:EntityProperty.editor>

</df:EntityProperty>

<df:EntityProperty name="password1" displayName="Password" hintText="Password..." index="3">

<df:EntityProperty.editor>

<df:PropertyEditor type="Password" />

</df:EntityProperty.editor>

</df:EntityProperty>

<df:EntityProperty name="password2" displayName="Confirm Password" hintText="Confirm Password..." index="4">

<df:EntityProperty.editor>

<df:PropertyEditor type="Password" />

</df:EntityProperty.editor>

</df:EntityProperty>

</df:RadDataForm.properties>

</df:RadDataForm>

<Button row="1" text="Register" tap="register" className="btn-primary" />

</GridLayout>

</Page>

With these changes applied (both the for the Observable source and the XML), the RadDataForm now loads in iOS as expected. I hope that you will find this information applicable but please do let me know if you need further assistance!

Regards,
Nikolay Iliev
Telerik by Progress

Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.

answered on 09 May 2017, 03:16 PM

Hello Nikolay,

thanks for your help and for the provided code. Sorry for the syntax errors in my provided sample code-snippets, I pasted my whole code in here and I have shortened it afterwards just to simplify it. During this process, I may have removed some closing tags accidentally.

We want to wait a while until we migrate our project to NativeScript 3.0, that's why we still use the Observable constructor, that accepts an Object literal, but thanks anyway for that advice.

It turned out, that the reason for the issue on iOS is the missing pre-defined space in the XML (your second remark). After using your XML snippet, I was able to visualize the DataForm.

But it is important for us to put the DataForm into a ScrollView, as it may have a longer content that need to be scrollable and we do not want the submit-button to be sticking at the bottom, but it should be visible only when scrolling down (if scrolling is necessary on a smaller device).

I tried this:

<ScrollView>

<GridLayout rows="*,auto">

<df:RadDataForm id="registerDataForm"

row="0"

source="{{ registerFormData }}">

<df:RadDataForm.properties>

<df:EntityProperty name="nickname" hintText="Nickname..." index="0">

<df:EntityProperty.editor>

<df:PropertyEditor type="Text" />

</df:EntityProperty.editor>

</df:EntityProperty>

<df:EntityProperty name="email1" hintText="Email..." index="1">

<df:EntityProperty.editor>

<df:PropertyEditor type="Email" />

</df:EntityProperty.editor>

</df:EntityProperty>

</df:RadDataForm.properties>

</df:RadDataForm>

<Button row="1" text="Register" tap="register" className="btn-primary" />

</GridLayout>

</ScrollView>

but that does not work. The DataForm gets invisible on iOS again, unless I remove the ScrollView around the GridLayout.

Do you know a workaround on that?

Best regards and thank you in advance,

Marc

answered on 10 May 2017, 07:32 AM

Hi Marc,

Once you have set height for the row containing the RadDataForma or for the RadDaaForm itself it should be scrollable for both iOS and Android. I have created demonstration application here.

Also made this screen video to show how this is behaving on my side. Let me know if this is the wanted behavior and if you still experience other results in your project you can send me a sample demo that reproduces the issue (in such case please also include information on what iOS emulator/device you are testing).

A possible reason for the RadDataForm to be hidden when wrapped in ScrollView is that the scroll-view needs the dimensions of its children so it might be a timing issue (for example if the source of your form is loaded dynamically via online API). In such case, you may try to giving a hard coded value in DPsinsteadd of * for your GridLayout.

Regards,
Nikolay Iliev
Telerik by Progress

answered on 10 May 2017, 12:07 PM

Hi Nikolay,

your video shows exactly what I want to achieve, thanks for that.

But unfortunately I have some trouble with your sample. The DataForm is invisible on my iOS device, like it is in our own project. Are you sure that you sample is the right one, that produces the app from your video?

I applied a fixed height to the GridLayout (and as a second try also directly to the DataForm) like this:

<ScrollView>

<GridLayout rows="800, auto">

<df:RadDataForm row="0" id="registerDataForm" source="{{ registerFormData }}">

...

</df:RadDataForm>

<Button row="1" text="Register" tap="register" />

</GridLayout>

</ScrollView>

The result: on my iPhone 4S (iOS 8.4) test device, there was some space between the end of the form and the button, while on Android Nexus 5 Emulator, the form did not fit into the first row of the GridLayout, so I may not use any hard coded height there as it leads to different results for different devices.. I also put the ScrollView in another GridLayout with rows="*", but it makes no difference.

I am looking for another way to tell the surrounding ScrollView, that it should be stretched to the full height of the form plus the height of the button, so that I can scroll both components in one scroll container.

I am wondering if the app from your screen video is really created by the code from your sample...? I noticed that you were running your sample app in a iPhone 6 simulator with iOS 10. Unortunately this iPhone 4S is the only available test device for me right now, so I am not able to test, if the different iOS version is the reason that your provided code sample works for you.

Best regards,

Marc

answered on 10 May 2017, 01:46 PM

Hey Marc,

I am using the exact same application as posted in my previous post and I have just tested my solution on iOS 8.4 with iPhone 4s emulator and also on real device and the RadDataForm is showing as expected. Can you try testing my sample applicaiton with iOS emulator of your choice?

Another possible reason for the content of ScrollView not to show is if your ScrollView is not the only element on that level in the XML tree (e.g.it should be like root element) - however in my test applicaiton this is not the case so it is really intriguing why the form is not showing on your side.

Empty or non-existing source can also "hide" your RadDataForm -
Check if your source object has some actual test values as in the test app.
Also you might want to check if you have the loaded event in your Page and verify that it is using the proper fallback method (e.g. in the XML file loaded="onPageLoaded" and in the code-behind ffile export function onPageLoaded). Following this logic you might try to eliminate timing issue by assigning the binding context in navigatingTo="onNavigatingTo".as this life cycle is executebefore the loaded event

Another possible thing is to assign exact height for your Button.
e.g.

<GridLayout rows="*, 80">

Using GridLayout with row set to * is the best scenario to achieve your goal. You can also achieve very flexible layout structure using FlexBoxLayout.

I hope that testing with iOS emulators will produce the expected behavour but please do let me know what are the results.

Regards,
Nikolay Iliev
Telerik by Progress

answered on 11 May 2017, 09:33 AM

Hi Nikolay,

thanks again for your advices.

I am developing under Microsoft Windows and I am using the Telerik AppBuilder CLI for building our NativeScript app, that's why I am not able to use any iOS emulators. I tried to create a new AppBuilder project with your code, but I am not able to deploy it on our iPhone 4S, because of troubles with provisioning profiles and code signing etc... I just had a deeper look into your provided sample project and I noticed, that you are using the latest tns-core-modules and the latest Telerik UI for NativeScript.

As I mentioned in my first post and in my second post, we are still using tns-core-modules 2.5.2, Telerik UI for NativeScript 1.6.1 and we are building our app with mobileframework version 2.5, as the AppBuilder does not allow 3.0 builds (and we need to wait for migration of some other plugins).

I created a new page in our app using exact the same code from your xml file and the corresponding JS file and I could not get the same result on iOS that you get according to your screen video (only on Android of course).

The form and its source are completely defined in my xml and in the code-behind (like in your sample code and in my provided code snippets from my first post here) and there is nothing loaded dynamically, so there may not be any timing issues. Nevertheless, I tried to use the navigatingTo event for assigning the bindingContext, but that makes no difference.

It seems that I need to wait for an update of the Telerik AppBuilder, until I'm able to migrate our project to NS 3.0 and upgrade the Telerik UI plugin to the latest version 2.0.1. Otherwise I do not understand why your sample project brings the expected behaviour for you and not for me, using the same code.

Best regards,

Marc

answered on 11 May 2017, 11:14 AM

Hey Marc,

Indeed it appears that the reason for the difference in the behavior of my application is the used version of NativeScript (2.5x vs 3.x.x). As I was testing on NativeScriptb 3.x.x it is entirely my mistake that I have not seen that you are using AppBuilder with NativeScript 2.5.2 so please accept my apologies on that matter! The issue appears to be wanted feature for RadCalendar and I also logged this for RadDataForm as well here.

Back to the issue - in NativeScript 2.5.2 the iOS implementation of the RadDataForm scroll is basically preventing the parent ScrollView to propagate its events while the same is working in NativeScript 3.0.0.
While we can set isUserInteractionEnabled to false to disable the RadDataForm scroll in favor of the ScrollView it will result in additional issues so I am not recommending this usage (the RadDataForm editors will stop working as well due to the way iOS is propagating events).

I have also talked to the AppBuilder team and they are currently actively working on integration with NativeScript 3.0.0 and the first test versions are expected within days (there is no official date yet) so stay in touch. At this very moment, the only applicable scenario for iOS is one of your initial variants where the Button is always visible. Perhaps as a temporary workaround (until versions 3.0.0 is integrated into AppBuilder) you can play with the visibility of the button and set it collapsed by default and make it only visible when the user has entered the need info in your RadDataForm.

Regards,
Nikolay Iliev
Telerik by Progress

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

DataForm invisible on iOS

8 Answers, 1 is accepted