how to link mvvm form to backend

2 posts, 0 answers
  1. Reggie
    Reggie avatar
    1 posts
    Member since:
    Apr 2016

    Posted 27 Jun Link to this post

    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

  2. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 28 Jun Link to this post

    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.
     
Back to Top