custom_input template - Githubissues

Fr33maan commented 8 years ago

Hi,

I don't really understand how to use custom input.

I already used a custom plugin so I tried to do the same -> put my .html file in a folder and set the relative path from the JSON to the custom_input field but with no success.

I searched in the exemples to find the correct usage but it is referenced nowhere.

Could you provide an exemple please ?

Fr33maan commented 8 years ago

To be more precise :

Folders architecture

.templates/some_field.html

Files

some_field.html

<h3>
  Hey ! I'm the best title in the world !
</h3>

Input.json - the involved field

{
    "name": "someField",
    "title": "Some field",
    "type": "string",
    "required": false,
    "join_collection": "",
    "default": "",
    "min": "",
    "max": "",
    "format": "",
    "searchable": false,
    "sortable": false,
    "exportable": false,
    "input": "custom",
    "input_template": ".templates/some_field.html",
    "input_group_class": "",
    "input_control_class": "",
    "input_items": [],
    "lookup_query_name": "",
    "lookup_query_params": [],
    "lookup_key": "",
    "lookup_field": "",
    "display_helper": "",
    "array_item_type": "",
    "crud_fields": [],
    "crud_insert_title": "",
    "file_collection": "",
    "file_container": "",
    "join_collection_field": "",
    "join_container": "",
    "join_fields": [],
    "show_in_dataview": true,
    "show_in_insert_form": true,
    "show_in_update_form": true,
    "show_in_read_only_form": true
}

According to 0.9.18 I must specify the extension but according to the forum I musn't specify the extension.

and finally the code generated :

<div class="form-group  field-some-field">
    <label for="someField">
        Some field
    </label>
    <div class="input-div">
        <p class="form-control-static">
            {{admin_user.someField}}
        </p>
    </div>
</div>

rgstephens commented 8 years ago

@l1br3 I used a custom_template for the first time in the last week. I found it useful to look at the generated code for an existing view and started by copying the .html and .js files from an existing generated view.

Something under /client/views/. In my case, my view specification looks like this:

"type": "custom",
"custom_template": "client/scorecard",

In the client directory, relative to the json/yaml file there are two files scorecard.html and scorecard.js.

Here's an abbreviated client/scorecard.js:

Template.TEMPLATE_NAME.rendered = function() {
    console.log('foursomeDetails rendered');
};

Template.TEMPLATE_NAME.events({
});

Template.TEMPLATE_NAME.helpers({
});

Template.Scorecard.helpers({
    "course": function() {
        var rounds =  this.rounds_by_foursome.fetch();
        rounds[0].course.dateRound = rounds[0].dateRound;
        return rounds[0].course;
    },
    "tee": function() {
        var rounds =  this.rounds_by_foursome.fetch();
        rounds[0].tee.holes = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18];
        return rounds[0].tee;
    }
});

Here's an abbreviated client/scorecard.html:

<template name="TEMPLATE_NAME">
    <div class="page-container container" id="content">
        <div class="row" id="title_row">
            <div class="col-md-12">
                <div id="page_menu" class="pull-right">
                </div>
            </div>
        </div>
        {{> Scorecard}}{{> ScorecardButtons}}
    </div>
</template>

<template name="Scorecard">
  ....
</template>

<template name="ScorecardButtons">
  ....
</template>

Fr33maan commented 8 years ago

Thanks for your help but I still missing the point.

The component JSON

"components": [
{
"name": "details_form",
"type": "form",
"mode": "read_only",
"title": "User details",
"query_name": "admin_user",
"fields": [
    {
        "name": "profile.email",
        "title": "E-mail",
        "type": "email"
    },
    {
        "name": "profile.firstName",
        "title": "firstName",
        "type": "string"
    },
    {
        "name": "profile.lastName",
        "title": "lastName",
        "type": "string"
    },
    {
        "name": "profile.cellNumber",
        "title": "Cell number",
        "type": "string"
    },
    {
        "name": "profile.birthday",
        "title": "Birthday",
        "type": "date",
        "format": "DD/MM/YYYY"
    },
    {
        "name": "profile.picture",
        "title": "Picture",
        "type": "string"
    },
    {
        "name": "UserMoving",
        "title": "UserMoving",
        "type": "string",
        "input": "custom",
        "input_template": "client/views/custom_components/moving_link/moving_link"
    }
],
"close_route": "admin.users",
"back_route": "admin.users",
"class": "details_form_custom"
}"

My html under client/views/custom_components/moving_link/moving_link.html

<template name="moving_link">
  <div class="form-group  field-movingId">
    <label for="movingId">
      MOVING LINK
    </label>
    <div class="input-div">
      <p class="form-control-static">
        MOVING LINK
      </p>
    </div>
  </div>
</template>

My js under client/views/custom_components/moving_link/moving_link.js

Template.moving_link.rendered = function() {
    console.log('movingId rendered');
    console.log('i lov me')
};

The generated HTML absolutely not contains this template.

I don't underqtand what I do wrong

perak commented 8 years ago

@l1br3 do you have any errors/warnings during build? And does generator exited normally (printing "generator finished") or stops quietly in the middle of the process without printing any errors?

Fr33maan commented 8 years ago

Reading input file... Creating directory structure... Checking installed packages...

Checking installed packages... Creating router... Creating collection "moving"... Creating collection "address"... Using theme "bootswatch-slate"... Copying theme files... Creating stylesheet... Creating layout... Creating zone "free_zone"... Creating zone "public_zone"... Creating component "left_menu"... Creating component "right_menu"... Creating page "home_public"... Creating component "home_jumbotron"... Creating page "login"... Creating page "register"... Creating page "verify_email"... Creating page "forgot_password"... Creating page "reset_password"... Creating zone "private_zone"... Creating component "left_menu"... Creating component "right_menu"... Creating page "home_private"... Creating page "admin"... Creating component "side_menu"... Creating page "users"... Plugin "adadmin/users_metrics"... Executing plugin... Creating component "users_metrics"... Creating component "view"... Creating page "details"...

Creating component "details_form"... Creating page "insert"... Creating component "insert_form"... Creating page "edit"... Creating component "edit_form"... Creating page "movings"... Creating component "view"... Creating page "insert"... Creating component "insert_form"... Creating page "details"... Creating component "details_form"... Creating page "edit"... Creating component "edit_form"... Creating page "user_settings"... Creating component "side_menu"... Creating page "profile"... Creating component "edit_form"... Creating page "change_pass"... Creating page "logout"... Copying files...

Generator finished.

Fr33maan commented 8 years ago

I've also written a plugin and it is working exactly as expected + its in the logs

perak commented 8 years ago

OK... I'll test that litle bit later, busy at the moment...

perak commented 8 years ago

@l1br3 not custom_template, should be input_template 😄

perak commented 8 years ago

Ooops, sorry, it is input_template ...

perak commented 8 years ago

@l1br3 Just checked: it doesn't work with "read_only" forms (uses "read_only" field template by default).

This is still an issue, will be fixed in next version (0.9.65)

perak commented 8 years ago

@l1br3 As a workaround, maybe you can add custom_component into your form "components" array, and set dest_selector to field after which you want this custom field to appear, and set dest_position to "after". Works (I just tested).

Example:

If field just before your custom field is named "blah" then set:

{
  "type": "custom",
  "name": "my_custom_field",
  "custom_template": ".........",
  "dest_selector": ".field-blah",
  "dest_position": "after"
}

Fr33maan commented 8 years ago

That's a clever solution !

I get the following error :

Destination element ".field-profile-asked-question" not found.

While I have the following html element in my form :

            <div class="form-group  field-profile-asked-question">
                <label for="profile.askedQuestion">
                    askedQuestions
                </label>
                <div class="input-div">
                    <p class="form-control-static">
                        {{admin_user.profile.askedQuestion}}
                    </p>
                </div>
            </div>

Fr33maan commented 8 years ago

My bad, I was adding the component outside the form !

Fr33maan commented 8 years ago

The workaround given by @perak works perfectly, thanks !

Feel free to close the issue once 0.9.65 is released !

perak commented 8 years ago

👍

Fr33maan commented 8 years ago

Is this bug also existing in data_view elements ?

I'm trying to also add a link in the data_view table with no success.

The code is generated but my template is not rendered.

My template :

<template name="users_data_view_moving_link">
    Hello
</template>

The html generated :

    <tr id="dataview-table-items-row">
        <td>
            {{profile.name}}
        </td>
        <td>
            {{profile.email}}
        </td>
        <td>
            {{roles}}
        </td>
        <td>
            {{users_data_view_moving_link}}
        </td>
        <td class="td-icon">
            <span id="edit-button" class="fa fa-pencil {{editButtonClass}}" title="Edit">
            </span>
        </td>
    </tr>

Fr33maan commented 8 years ago

Ok the generator actually thinks that I try to find an attribute called users_data_view_moving_link instead of a template.

I've found an hackish workaround, I named my attribute >users_data_view_moving_link and the generated code now call the template.

But I guess it only works if I declare my template in the client directory, not if I wnt to keep them away from the generated structure as my .templates directory is.

Working but hackish and not clean

tripflex commented 7 years ago

For anybody coming across this trying to create a custom field input type, you will have to generate from MK using a json file, and just place the custom files in the same directory as the json file you're using to generate with ... unfortunately I have not found a way yet to do this when generating via the MK url.

I've also noticed that this only works for HTML files, and does not do anything with JS files. You also do not need to define a template, only the HTML to use for the input field.

perak commented 7 years ago

@tripflex we solved this at Gitter chat, but repeating here for others:

Since version 0.9.91:

If fields's input_template path is relative, then it is relative to current working directory (directory from which you invoked meteor-kitchen command), and that's only if input file is at URL.
if input_template is relative path and input file is local file (not URL) then input_template path is relative to input .json file (the same as before).
There is new input_template_code property where you can directly enter markup for your input control. In that case you don't need external file (you don't need input_template).
If you need any initialization (jQuery or javascript code of any kind), then you can add it into form's template_rendered_code.

perak / kitchen-site

custom_input template #307

Folders architecture

Files

Input.json - the involved field