schema.xmlto include a new Category
model. This model will only have one field for now, a field that will store the 'name' of the category - we will also use this field as the default display value. Like this.
belongs-totag to the Item object type, and a
has-manyto the Category object type as shown below. Relationship tags should be listed after all the fields in a model but before the
<display>tag. Note that the
name=""property on the
has-manyallows you to specify a name for the whole collection of items that belong to a category. Using the pluralized form of the object type (in this case, "items") is a good convention to use for the collection name. On the
belongs-toside you can also specify a
name=""for the relationship, but if you don't the system will default the name to the name of the associated
model- in our case
belongs-totag on our
itemmodel, this time pointing to the
usermodel, and we add the
has-manytag to the
usermodel. For this
belongs-torelationship let's not use the system default name, and instead specify it as
name="created_by". At this point your
schema.xmlfile should look like this.
add_new.view.xmlfile, add a new variable called
all_categorieswhich will be of type
query:category. Like this.
init()function to populate the categories using a Query and also populate the relationship to the
usermodel. To set the
belongs-torelationship in JS we use a helper method that is created for us on the model in question, this method will use the value of
namethat is specified in the in the Data Model in the
<belongs-to>tag. So in our case, we specified the relationship as
<belongs-to model="user" name="created_by" />and so we will use the
created_bymethod to set the relationship to the user model, like this.
<object-dropdown>View Component, above the
<text-input>component, allowing the user to select the category. Note that:
query="all_categories"so that the list will show all the categories that we've pulled using our Query.
bind="item.category"so that the category that the user selects will be stored in the category relationship on our item variable.
categoryas well. Like this:
listcomponent on our Main view to display the
categoryinside of the
<content>tag, and while we are at it, let's also add the
created_attimestamp in the
<footer>tag. So, in your
main.view.xml, update the list component like this.
browse_items, but first let's add a button on our Main view to allow the user to navigate to the Browse Items view. So, on your
main.view.xml, add a new button to the
<button-group>below the 'Add New Item' button, and hook it up like this:
navigationlogic directly in the
on-pressattribute by using the
$:notation to execute raw JS from our View XML.
browse_items(remember, you can create views using the command palette,
cmd+shift+pto open the command palette and then start typing create and choose the
Create viewaction), and then once created update the
<view title="Browse Punch Items by Category">as before.
queryfor this), let the user select a category (we will need a
categoryvariable for this), and then show the user all the punch items that belong to the selected category (we will need another
queryfor this). So, in your newly created
browse_items.view.xmlspecify all these variables, like this.
hide-iflogic available to any view component (syntax reference for
hide-ifavailable here). We will display an
<object-list>for all the categories but once the user selects one we will hide the
<object-list>and display a
itemsinstead (re-using the list we defined on our main view). So, in your
browse_items.view.xml, add the following code:
show-ifto only display the button if the user has already made a selection). After that we also need to populate the various queries from our JS. Populating the
all_categoriesvariable can be done from the
init()function, but we can only populate
filtered_itemsonce the user makes a selection, and we need to re-populate it every time the user makes a new selection. To do this we will make use of the
on-change=""attribute of our
<object-list>component. (Note, the
on-change=""attribute is available on all
inputcomponents, but note that for
scan-barcodeit is referenced as
on-scaninstead). So, update your
browse_items.view.xmlto the following:
browse_items.jsfile next to populate our queries and handle the
on-changeevent, as well as the
selectItemfunction calls (let's reuse the selectItem functions from the main view). Like this