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

how to link mvvm form to backend

1 Answer 65 Views
General Discussion
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Reggie
Top achievements
Rank 1
Reggie asked on 27 Jun 2016, 05:47 AM

Hi, I have used the appbuilder to develop forms and want to link these to the backend. I have enabled data and a data provider. I have also created the content types but have not managed to specify these in the code. when I click confirm the data is not submitted. I suspect its about specifying content type though im not sure.

<div data-role="view" data-title="Glucose Measurement" data-layout="main-nonav" data-model="app.bloodGlucose" data-show="app.bloodGlucose.onShow" data-after-show="app.bloodGlucose.afterShow">
    <div id="bloodGlucoseModel" class="form-view">
        <form>
            <ul class="form-content" data-role="listview" data-style="inset">
                <li class="form-content-item">


                    <label>

                        <span>Date/time</span>

                        <input data-bind="value: bloodGlucoseModel.fields.datetime" type="datetime-local">
                    </label>

                </li>
                <li class="form-content-item">
                    <label>

                        <span>Meal Type</span>

                        <select data-bind="value: bloodGlucoseModel.fields.mealType" data-role="dropdownlist">
                            <option value="Breakfast">Breakfast</option>
                            <option value="Lunch">Lunch</option>
                            <option value="Supper">Supper</option>
                        </select>
                    </label>
                </li>
                <li class="form-content-item">
                    <label>

                        <span>Before or After Meal</span>

                        <select data-bind="value: bloodGlucoseModel.fields.beforeAfterMeal" data-role="dropdownlist">
                            <option value="Before">Before</option>
                            <option value="After">After</option>
                        </select>
                    </label>
                </li>
                <li class="form-content-item">


                    <label>

                        <span>Measurement (mmol/l)</span>

                        <input data-bind="value: bloodGlucoseModel.fields.glucoseValue" type="number">
                    </label>

                </li>
            </ul>

            <div class="button-group">
                <a data-role="button" data-bind="events: { click: bloodGlucoseModel.cancel }">Cancel</a>
                <a class="primary" data-role="button" data-bind="events: { click: bloodGlucoseModel.submit }">Confirm</a>
            </div>
        </form>
        <!-- START_CUSTOM_CODE_bloodGlucoseModel -->
        <!-- Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes -->

        <!-- END_CUSTOM_CODE_bloodGlucoseModel -->
    </div>

    <!-- START_CUSTOM_CODE_bloodGlucose -->
    <!-- Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes -->

    <!-- END_CUSTOM_CODE_bloodGlucose -->
</div>

and the index

app.bloodGlucose = kendo.observable({
    onShow: function() {},
    afterShow: function() {}
});

// START_CUSTOM_CODE_bloodGlucose
// Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes

// END_CUSTOM_CODE_bloodGlucose
(function(parent) {
    var bloodGlucoseModel = kendo.observable({
        fields: {
            glucoseValue: '',
            beforeAfterMeal: '',
            mealType: '',
            datetime: '',
        },
        submit: function() {},
        cancel: function() {}
    });

    parent.set('bloodGlucoseModel', bloodGlucoseModel);
})(app.bloodGlucose);

// START_CUSTOM_CODE_bloodGlucoseModel
// Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes

// END_CUSTOM_CODE_bloodGlucoseModel

1 Answer, 1 is accepted

Sort by
0
Anton Dobrev
Telerik team
answered on 28 Jun 2016, 02:09 PM
Hi Reggie,

You can submit the form to your Backend Services content type using the JS SDK instance which you already have generated for you in the app. For example (in the snippet below provide the type name and check the names of the model and the data provider too to adjust it to your code):

submit: function() {
    var dataProvider,
        typeName;
 
    dataProvider = app.data.defaultProvider;
    typeName = "my-type";
 
    var dataItem = new kendo.data.ObservableObject(this.bloodGlucoseModel.fields);
 
    dataProvider.data(typeName).create(dataItem, function(data) {
        var resultItem = data.result;
        // handle the result here
 
    }, function(err) {
        alert("There was an error" + err.message);
    });
},

More about the usage of the SDK can be found here.

You can also take a look into the Friends sample app here.

I would also encourage you to go through our interactive tutorials if you have not done it yet.

Regards,
Anton Dobrev
Telerik
 
Everlive is now Telerik Backend Services, and is part of the Telerik Platform.
 
Tags
General Discussion
Asked by
Reggie
Top achievements
Rank 1
Answers by
Anton Dobrev
Telerik team
Share this question
or