uAdmin Tutorial Part 5 - Applying uAdmin Tags and m2m

Create a file named item.go inside your models folder, containing the following codes below.

package models

import "github.com/uadmin/uadmin"

// Item model ...
type Item struct {
    uadmin.Model
    Name        string `uadmin:"required"`
    Description string
    Cost        int
    Rating      int
}

Now register the model on main.go where models is folder name and Item is model/struct name. Apply the inlines as well.

func main() {
    uadmin.Register(
        models.Todo{},
        models.Category{},
        models.Friend{},
        models.Item{},  //  <-- place it here
    )

    // Some codes contained in this part...

    // ----------- ADD THIS CODE -----------
    uadmin.RegisterInlines(models.Item{}, map[string]string{
        "Todo": "ItemID",
    })
    // ----------- ADD THIS CODE -----------
    uadmin.StartServer()
}

Set the foreign key of an Item model to the Todo model and apply the tag “help” to inform the user waht are the requirements needed in order to accomplish his activity.

// Todo model ...
type Todo struct {
    uadmin.Model
    Name        string
    Description string   `uadmin:"html"`
    Category    Category
    CategoryID  uint
    Friend      Friend `uadmin:"help:Who will be a part of your activity?"`
    FriendID    uint
    Item    Item    `uadmin:"help:What are the requirements needed in order to accomplish your activity?"`
    ItemID  uint
    TargetDate  time.Time
    Progress    int `uadmin:"progress_bar"`
}

Now let’s try something much cooler that we can apply in the Item model by adding different types of tags. Before we proceed, add more data in your Item model. Once you are done, let’s add the “search” tag in the name field of item.go and see what happens.

package models

import "github.com/uadmin/uadmin"

// Item model ...
type Item struct {
    uadmin.Model
    Name        string `uadmin:"required;search"` // <-- place it here
    Description string
    Cost        int
    Rating      int
}

Result

../_images/searchtagapplied.png

Search the word “mini” and see what happens.

../_images/searchtagappliedoutput.png

Nice! Now go back to item.go and apply the tag categorical_filter and filter in the Name field and see what happens.

Name string `uadmin:"required;search;categorical_filter;filter"`

Click the filter button on the upper right.

Result

../_images/filtertagapplied.png

Now let’s filter the word “iPad” and see what happens.

../_images/filtertagappliedoutput.png

We can also apply display_name tag with a given value such as “Product Name”.

Name string `uadmin:"required;search;categorical_filter;filter;display_name:Product Name"`

Result

../_images/displaynametagapplied1.png

uAdmin has a default_value tag which will generate a value automatically in the field. Let’s say “Computer”.

Name string `uadmin:"required;search;categorical_filter;filter;display_name:Product Name;default_value:Computer"`

Result

../_images/defaultvaluetagapplied1.png

You can also add multilingual tag in the Description field. This means you can use more than two languages for input.

Description string `uadmin:"multilingual"`

Result

../_images/multilingualtagapplied1.png

If you want to add more languages in your model, go to the Languages in the uAdmin dashboard.

../_images/languageshighlighted1.png

Let’s say I want to add Chinese and Tagalog in the Items model. In order to do that, set the Active as enabled.

../_images/activehighlighted.png

Now go back to the Items model and see what happens.

../_images/multilingualtagappliedmultiple.png

To customize your own languages, click here for the instructions.


In the Cost field, set the “money” tag and see what happens.

Cost int `uadmin:"money"`

Result

../_images/moneytagapplied1.png

You can also set pattern and pattern_msg tag in the Cost field. This means the user must input numbers only. If he inputs otherwise, the pattern message will show up on the screen.

Cost int `uadmin:"money;pattern:^[0-9]*$;pattern_msg:Your input must be a number."`

Result

../_images/patterntagapplied1.png

To solve this case, we can use a help tag feature in order to give users a solution to the complex tasks encountered in the model.

Cost int `uadmin:"money;pattern:^[0-9]*$;pattern_msg:Your input must be a number.;help:Input numeric characters only in this field."`

Result

../_images/helptagapplied1.png

We can also use min and max tags in the Rating field. Min tag means the minimum value that a user can input and the max one means the maximum value. Let’s set the min value as 1 and the max value as 5.

Rating int `uadmin:"min:1;max:5"`

See what happens if the user inputs the value outside the range.

../_images/minmaxtagapplied.png

uAdmin also has a multiselection feature that allows you to select more than one element inside an input box field. In order to do that, let’s add Category on the first line, use the array type, set as “list_exclude”, and add CategoryList on the second line with the tag “read_only”. This means it cannot be modified.

Copy this code below

Category     []Category `uadmin:"list_exclude"`
CategoryList string     `uadmin:"read_only"`

To the item.go inside the models folder

package models

import "github.com/uadmin/uadmin"

// Item model ...
type Item struct {
    uadmin.Model
    Name         string     `uadmin:"search;categorical_filter;filter;display_name:Product Name"`
    Description  string     `uadmin:"multilingual"`
    Category     []Category `uadmin:"list_exclude"`  // <-- place it here
    CategoryList string     `uadmin:"read_only"`         // <-- place it here
    Cost         int        `uadmin:"money;pattern:^[0-9]*$;pattern_msg:Your input must be a number."`
    Rating       int        `uadmin:"min:1;max:5"`
}

Copy this one as well and paste it below the Item struct.

// CategorySave ...
func (i *Item) CategorySave() {
    // Initializes the catList as empty string
    catList := ""

    // This process will get the name of the category, store into the
    // catList and if the index value is not equal to the number of
    // category, it will insert the comma symbol at the end of the word.
    for x, key := range i.Category {
        catList += key.Name
        if x != len(i.Category)-1 {
            catList += ", "
        }
    }

    // Store the catList variable to the CategoryList field in the Item model
    i.CategoryList = catList

    // Override save
    uadmin.Save(i)
}

// Save ...
func (i *Item) Save() {
    if i.ID == 0 {
        i.CategorySave()
    }

    i.CategorySave()
}

Let’s run the application and see what happens.

../_images/m2mtagapplied.png

Result

../_images/m2mtagappliedoutput.png

Well done! Now you know how to apply most of the tags available in our uAdmin framework that are functional in our Todo List project.

See Tag Reference for more examples.

In the next part, we will discuss on how to apply validation in the back-end.