Tag Reference ============= What is a tag? -------------- A tag is a generic term for a language element descriptor. The set of tags for a document or other unit of information is sometimes referred to as markup, a term that dates to pre-computer days when writers and copy editors marked up document elements with copy editing symbols or shorthand. [#f1]_ In uAdmin, there are two different types of tags: `Meta Tags`_ and `Type Tags`_. .. _Meta Tags: https://uadmin-docs.readthedocs.io/en/latest/tags.html#id4 .. _Type Tags: https://uadmin-docs.readthedocs.io/en/latest/tags.html#id4 Meta Tags vs. Type Tags ----------------------- **Meta tags** provide metadata about the uAdmin document that describes some aspect of the contents of a model structure. Meta tags are used to add extra features on the fields initialized in the model structure. Each field can have multiple meta tags. Example: .. code:: type (model_name) struct { uadmin.Model Name string `uadmin:"required;filter"` } As shown above, required and filter are used meta tags. **Type tags** are used to specify what type of component should be displayed. Type tags are used to implement the type of component on the fields initialized in the model structure. Unlike in meta tags, type tags can be called only once. Example: .. code:: type (model_name) struct { uadmin.Model Icon string `uadmin:"image"` } | .. list-table:: **LIST OF UADMIN TAGS** :widths: 15 30 15 :align: center :header-rows: 1 * - Meta Tags - - Type Tags * - * `approval`_ - - * `code`_ * - * `categorical_filter`_ - - * `email`_ * - * `default_value`_ - - * `file`_ * - * `display_name`_ - - * `html`_ * - * `encrypt`_ - - * `image`_ * - * `filter`_ - - * `link`_ * - * `help`_ - - * `money`_ * - * `hidden`_ - - * `multilingual`_ * - * `list_exclude`_ - - * `password`_ * - * `max`_ - - * `progress_bar`_ * - * `min`_ - - * `webcam`_ * - * `pattern`_ - - * - * `pattern_msg`_ - - * - * `read_only`_ - - * - * `required`_ - - * - * `search`_ - - * - * `stringer`_ - - * - * `upload_to`_ - - Meta Tags --------- **approval** ^^^^^^^^^^^^ `Back to Top`_ A feature used to set an approval permission in the field Structure: .. code-block:: go `uadmin:"approval"` Suppose you have "johndoe" account in the User model that is not an admin. .. image:: document_system/tutorial/assets/johndoerecord.png | And you have user permissions for that user in Friends model without an approval access. .. image:: api/assets/johndoeuserpermissionapproval.png | Open your Todo List project, go to the friend.go and set the approval tag in the Name field. .. code-block:: go package models import "github.com/uadmin/uadmin" // Friend model ... type Friend struct { uadmin.Model Name string `uadmin:"approval"` Email string Password string } Run your application and login your account using "johndoe". .. image:: document_system/tutorial/assets/johndoelogin.png :align: center | As you can see, only the Friends model is accessible in the dashboard. It is based on the user permission that was assigned on that user. Now click on "FRIENDS". .. image:: api/assets/friendsapprovalhighlighted.png | Click "Add New Friend" to create a new record. .. image:: api/assets/addnewfriend.png | Let's input the following field for this record. .. image:: api/assets/johndoefriendrecord.png :align: center | Result .. image:: api/assets/johndoenameempty.png | Based on the result, the name does not show up because we need an approval to someone who has approval access. Now logout johndoe account then login an admin account. .. image:: api/assets/loginformadmin.png :align: center | From uAdmin dashboard, go to the Friends model, click the record that you have created, and in the input box of the Name field, there is a yellow warning sign on the left side that means it needs an approval to someone who has approval access. Now click the highlighted area below. .. image:: api/assets/johndoeapprovalbutton.png :align: center | The admin will review the record that was created by a "johndoe" user. If you think his record is satisfactory, choose Approved in Approval Action then click Save and Continue on the bottom right corner of the screen. .. image:: api/assets/johndoeapprovalreview.png | It is shown that the one who approved the record is an admin with an approved date. Now click View Record button to see the result. .. image:: api/assets/johndoeviewrecord.png :align: center | The input Name field has a checkmark sign that means the record created by "johndoe" was approved. .. image:: api/assets/johndoeapprovedrecord.png :align: center **categorical_filter** ^^^^^^^^^^^^^^^^^^^^^^ `Back to Top`_ A section of code that is designed to process user input and output request to produce a new data structure containing exactly those elements of the original data structure in the form of combo box Structure: .. code-block:: go `uadmin:"categorical_filter"` Open your Todo List project, go to the items.go and set the categorical_filter tag in the Name field. .. code-block:: go package models import "github.com/uadmin/uadmin" // Item model ... type Item struct { uadmin.Model Name string `uadmin:"categorical_filter"` Description string Cost int Rating int } Let's run the application to see the output. .. image:: assets/categoricalfilteroutput.png **default_value** ^^^^^^^^^^^^^^^^^ `Back to Top`_ Mainly used in the input field on which value you want to initialize. It is applicable only for string data type. Structure: .. code-block:: go `uadmin:"default_value"` Open your Todo List project, go to the items.go and set the default_value tag in the Name field. Let's say "Computer". .. code-block:: go package models import "github.com/uadmin/uadmin" // Item model ... type Item struct { uadmin.Model Name string `uadmin:"default_value:Computer"` // <-- place it here Description string Cost int Rating int } Let's run the application to see the output. .. image:: assets/defaultvaluetagapplied.png **display_name** ^^^^^^^^^^^^^^^^ `Back to Top`_ A feature to set the actual name in the field Structure: .. code-block:: go `uadmin:"display_name"` Open your Todo List project, go to the items.go and set the display_name tag in the Name field. Let's say "Product Name". .. code-block:: go package models import "github.com/uadmin/uadmin" // Item model ... type Item struct { uadmin.Model Name string `uadmin:"display_name:Product Name"` // <-- place it here Description string Cost int Rating int } Let's run the application to see the output. .. image:: assets/displaynametagapplied.png **encrypt** ^^^^^^^^^^^ `Back to Top`_ A feature used to encrypt the value in the database. It was released in version 0.1.0-beta.3. Structure: .. code-block:: go `uadmin:"encrypt"` Add a record in the Friend model. Notice that the password you have inputed is 123456. .. image:: assets/addrecordinfriendmodel.png | Go to the Friend model and apply the tag as "encrypt" in the Password field. .. code-block:: go // Friend model ... type Friend struct { uadmin.Model Name string Email string Password string `uadmin:"encrypt"` // <- place it here } Now rerun your application, refresh your browser and see what happens. .. image:: assets/passwordgone.png | The password is invisible now. Go to your project folder, open uadmin.db file, go to Browse Data tab, and you will notice that the password field is encrypted. .. image:: assets/sqlitepasswordencrypt.png | Remove the encrypt tag in the Friend model, rerun your application and see what happens. .. image:: assets/addrecordinfriendmodel.png | The password is shown again which means it is decrypted. **filter** ^^^^^^^^^^ `Back to Top`_ A section of code that is designed to process user input and output request to produce a new data structure containing exactly those elements of the original data structure in the form of fill-up text Structure: .. code-block:: go `uadmin:"filter"` Open your Todo List project, go to the item.go and set the filter tag in the Name field. .. code-block:: go package models import "github.com/uadmin/uadmin" // Item model ... type Item struct { uadmin.Model Name string `uadmin:"filter"` // <-- place it here Description string Cost int Rating int } Run your application. Click the filter button on the upper right. .. image:: tutorial/assets/filtertagapplied.png | Now let's filter the word "iPad" and see what happens. .. image:: tutorial/assets/filtertagappliedoutput.png **help** ^^^^^^^^ `Back to Top`_ A feature that gives solution(s) to solve advanced tasks Structure: .. code-block:: go `uadmin:"help"` Open your Todo List project, go to the item.go and set the help tag in the Name field. Let's say "Input numeric characters only in this field.". .. code-block:: go package models import "github.com/uadmin/uadmin" // Item model ... type Item struct { uadmin.Model Name string Description string Cost int `uadmin:"help:Input numeric characters only in this field."` // <-- place it here Rating int } Let's run the application to see the output. .. image:: assets/helptagapplied.png **hidden** ^^^^^^^^^^ `Back to Top`_ A feature to hide the component in the editing section of the data Structure: .. code-block:: go `uadmin:"hidden"` Open your Todo List project, go to the todo.go and set the hidden tag in the CreatedAt field. .. code-block:: go package models import ( "time" "github.com/uadmin/uadmin" ) // TODO model ... type TODO struct { uadmin.Model Name string Description string CreatedAt time.Time `uadmin:"hidden"` // <-- place it here TargetDate time.Time Progress int } Let's run the application to see the output. .. image:: assets/hiddentagapplied.png CreatedAt does not show up in the editing section of the data because it is set as "hidden". **list_exclude** ^^^^^^^^^^^^^^^^ `Back to Top`_ A feature that will hide the field or column name in the model structure Structure: .. code-block:: go `uadmin:"list_exclude"` Open your Todo List project, go to the friend.go and set the list_exclude tag in the Password field. .. code-block:: go package models import "github.com/uadmin/uadmin" // Friend model ... type Friend struct { uadmin.Model Name string Email string Password string `uadmin:"list_exclude"` // <-- place it here } Let's run the application to see the output. .. image:: assets/listexcludetagapplied.png Password does not show up in the model structure because it is set as "list_exclude". **max** ^^^^^^^ `Back to Top`_ Mainly used in the input field to set the maximum value Structure: .. code-block:: go `uadmin:"max"` Open your Todo List project, go to the item.go and set the max tag in the Rating field. Let's say 5. .. code-block:: go package models import "github.com/uadmin/uadmin" // Item model ... type Item struct { uadmin.Model Name string Description string Cost int Rating int `uadmin:"max:5"` // <-- place it here } Let's run the application to see the output. .. image:: assets/maxtagapplied.png It returns an error because the value is greater than 5 which is the maximum value allowed. **min** ^^^^^^^ `Back to Top`_ Mainly used in the input field to set the minimum value Structure: .. code-block:: go `uadmin:"min"` Open your Todo List project, go to the item.go and set the min tag in the Rating field. Let's say 1. .. code-block:: go package models import "github.com/uadmin/uadmin" // Item model ... type Item struct { uadmin.Model Name string Description string Cost int Rating int `uadmin:"min:1"` // <-- place it here } Let's run the application to see the output. .. image:: assets/mintagapplied.png It returns an error because the value is lesser than 1 which is the minimum value allowed. **pattern** ^^^^^^^^^^^ `Back to Top`_ Equivalent to regular expression that describes a pattern of characters Structure: .. code-block:: go `uadmin:"pattern:(regexp)"` Open your Todo List project, go to the item.go and set the pattern tag in the Cost field. Let's say ^[0-9]*$. This accepts numeric characters only. .. code-block:: go package models import "github.com/uadmin/uadmin" // Item model ... type Item struct { uadmin.Model Name string Description string Cost int `uadmin:"pattern:^[0-9]*$"` // <-- place it here Rating int } Let's run the application and see what happens. .. image:: assets/patterntagapplied.png | Output .. image:: assets/patterntagappliedoutput.png **pattern_msg** ^^^^^^^^^^^^^^^ `Back to Top`_ Notifies the user once the input has been done following the given pattern Structure: .. code-block:: go `uadmin:"pattern_msg:(message)"` Open your Todo List project, go to the item.go and set the pattern tag in the Cost field. Let's say "Your input must be a number.". This accepts numeric characters only. .. code-block:: go package models import "github.com/uadmin/uadmin" // Item model ... type Item struct { uadmin.Model Name string Description string Cost string `uadmin:"pattern:^[0-9]*$;pattern_msg:Your input must be a number."` // <-- place it here Rating int } Let's run the application and see what happens. .. image:: assets/patternmsgtagapplied.png It returns an error because the input value has letters and special symbols. **read_only** ^^^^^^^^^^^^^ `Back to Top`_ A feature that cannot be modified Structure: .. code-block:: go `uadmin:"read_only"` Open your Todo List project, go to the todo.go and set the read_only tag in the CreatedAt field. .. code-block:: go package models import ( "time" "github.com/uadmin/uadmin" ) // TODO model ... type TODO struct { uadmin.Model Name string Description string CreatedAt time.Time `uadmin:"read_only"` // <-- place it here TargetDate time.Time Progress int } Let's run the application to see the output. .. image:: assets/readonlytagapplied.png **required** ^^^^^^^^^^^^ `Back to Top`_ A section of code that the user must perform the given tasks. It cannot be skipped or left empty. Structure: .. code-block:: go `uadmin:"required"` Open your Todo List project, go to the category.go and set the required tag in the Name field. .. code-block:: go package models import "github.com/uadmin/uadmin" // Category model ... type Category struct { uadmin.Model Name string `uadmin:"required"` // <-- place it here Icon string } Let's run the application to see the output. .. image:: assets/requiredtagapplied.png It returns an error because the input value is empty. * symbol indicates that the Name field is required to fill up. **search** ^^^^^^^^^^ `Back to Top`_ A feature that allows the user to search for a field or column name Structure: .. code-block:: go `uadmin:"search"` Before we proceed, add more data in your items model. Once you are done, let's add the "search" tag in the name field of items.go and see what happens. .. code-block:: go package models import "github.com/uadmin/uadmin" // Items model ... type Items struct { uadmin.Model Name string `uadmin:"search"` // <-- place it here Description string Cost int Rating int } Result .. image:: tutorial/assets/searchtagapplied.png | Search the word "mini" and see what happens. .. image:: tutorial/assets/searchtagappliedoutput.png **stringer** ^^^^^^^^^^^^ `Back to Top`_ A feature that assigns a field as a unique type Structure: .. code-block:: go `uadmin:"stringer"` Open your Todo List project, go to friend.go inside the models folder, and apply the following codes below: .. code-block:: go // Friend model ... type Friend struct { uadmin.Model // Apply the stringer tag to show that this is the unique field // when we fetch data to the API Name string `uadmin:"stringer"` Email string Password string } Go to `uadmin.Stringer`_ in the API Reference for the continuation. .. _uadmin.Stringer: https://uadmin-docs.readthedocs.io/en/latest/api.html#uadmin-getstringer **upload_to** ^^^^^^^^^^^^^ `Back to Top`_ A feature where the uploaded file will save in the specified path on your project folder Structure: .. code-block:: go `uadmin:"upload_to:(path)"` Open your Todo List project, go to category.go inside the models folder, and apply the following codes below: .. code-block:: go // Category model ... type Category struct { uadmin.Model Name string Icon string // Add this field with the type tag of file and assigned path in // upload_to File string `uadmin:"file;upload_to:/media/files/"` } Run your application, go to the Category model and click Add New Category button on the top right corner of the screen. Let’s add a new record that includes the uploaded file from your computer (e.g. Windows Installation.pdf). .. image:: assets/uploadtoinstallation.png :align: center | Result .. image:: assets/uploadtoinstallationresult.png | From your project folder, go to /media/files/(generated_folder_name)/. As expected, the "Windows Installation.pdf” file was saved on that path. .. image:: assets/uploadtoinstallationsavedpath.png :align: center Type Tags --------- **code** ^^^^^^^^ `Back to Top`_ A set of instructions that will be executed by a computer Structure: .. code-block:: go `uadmin:"code"` Go to the friend.go and apply the following codes below: .. code-block:: go // Friend model ... type Friend struct { uadmin.Model Name string `uadmin:"required"` Email string `uadmin:"email"` Password string `uadmin:"password;list_exclude"` Message string `uadmin:"code"` // <-- place it here } // Save ! func (f *Friend) Save() { // Initialize two variables x := 5 y := 3 // Execution code. strconv.Itoa means converting from int to string. f.Message = "Hi, I'm " + f.Name + ". Can you solve " + strconv.Itoa(x) + " + " + strconv.Itoa(y) + " for me? The answer is " + strconv.Itoa(x+y) + "." // Override save uadmin.Save(f) } Now let's run the application, go to the Friend model, create a record, save then let's see the result. .. image:: assets/codetagapplied.png Well done! The execution code has performed successfully in the message field. **email** ^^^^^^^^^ `Back to Top`_ It identifies an email box to which email messages are delivered. It follows the format as follows: (name)@(domain). e.g. abc123@gmail.com Structure: .. code-block:: go `uadmin:"email"` Open your Todo List project, go to the friend.go and set the email tag in the Email field. .. code-block:: go package models import "github.com/uadmin/uadmin" // Friend model ... type Friend struct { uadmin.Model Name string Email string `uadmin:"email"` // <-- place it here Password string } Let's run the application to see the output. .. image:: assets/emailtagapplied.png It returns an error because the input value does not follow the email format. **file** ^^^^^^^^ `Back to Top`_ A tag that enables the user to upload files/attachments in the model Structure: .. code-block:: go `uadmin:"file"` Go to the category.go and apply the following codes below: .. code-block:: go package models import "github.com/uadmin/uadmin" // Category model ... type Category struct { uadmin.Model Name string `uadmin:"required"` Icon string `uadmin:"image"` File string `uadmin:"file"` // <-- place it here } Now run your application. Go to the Category model. In File field, you can upload any type of files in the model. .. image:: assets/filetagapplied.png | Now click the filename and see what happens. .. image:: assets/filetagappliedoutput.png | Result .. image:: assets/filetagappliedresult.png **html** ^^^^^^^^ `Back to Top`_ A tag that allows the user to modify text in HTML format Structure: .. code-block:: go `uadmin:"html"` Open your Todo List project, go to the todo.go and set the html tag in the Description field. .. code-block:: go package models import ( "time" "github.com/uadmin/uadmin" ) // TODO model ... type TODO struct { uadmin.Model Name string Description string `uadmin:"html"` // <-- place it here TargetDate time.Time Progress int } Let's run the application to see the output. .. image:: assets/htmlpic.png | HTML has a source code feature that allows you to modify your own code through the application itself. .. image:: assets/sourcecodehighlighted.png | Add this piece of code in the source code editor. This will create a bulleted unordered list. .. image:: assets/addedulhighlighted.png Result .. image:: assets/addeduloutput.png **image** ^^^^^^^^^ `Back to Top`_ A tag to mark a field as an image Structure: .. code-block:: go `uadmin:"image"` Open your Todo project. Go to your category.go in the models folder and let's use the **`uadmin:"image"`** in the Icon field. .. code-block:: go package models import "github.com/uadmin/uadmin" // Category model ... type Category struct { uadmin.Model Name string `uadmin:"required"` Icon string `uadmin:"image"` // <-- place it here } To run your code: .. code-block:: bash $ cd ~/go/src/github.com/your_name/todo $ go build; ./todo [ OK ] Initializing DB: [13/13] [ OK ] Synching System Settings: [51/51] [ OK ] Server Started: http://127.0.0.1:8000 Let's open the category model. .. image:: tutorial/assets/categorymodelselected.png | Create a new data in the category model. Press Save button below afterwards. .. image:: tutorial/assets/categorywithtagapplied.png | Result .. image:: tutorial/assets/categorydataoutputwithtag.png | uAdmin also allows you to crop your images. .. image:: tutorial/assets/cropiconhighlighted.png .. image:: tutorial/assets/croppedicon.png Once you are done, click the Crop button below and refresh the webpage to save your progress. Your uploaded images are located in /media/images/(image_folder) path from your project folder by default. .. image:: assets/imagefolders.png | Every image folder has two images: Original and Raw files. .. image:: assets/sampleimageuploadto.png :align: center | The raw images are the highlighted ones as shown below. .. image:: assets/selectedrawimages.png **link** ^^^^^^^^ `Back to Top`_ This type will display a button in the model. Structure: .. code-block:: go `uadmin:"link"` Let's add an Invite field in the friend.go that will direct you to his website. In order to do that, set the field name as "Invite" with the tag "link". .. code-block:: go // Friend model ... type Friend struct { uadmin.Model Name string Email string Password string Nationality string Invite string `uadmin:"link"` // <-- place it here } To make it functional, add the overriding save function after the Friend struct. .. code-block:: go // Save ! func (f *Friend) Save() { f.Invite = "https://www.google.com/" uadmin.Save(f) } Run your application, go to the Friends model and update the elements inside. Afterwards, click the Invite button on the output structure and see what happens. .. image:: tutorial/assets/invitebuttonhighlighted.png | Result .. image:: tutorial/assets/googlewebsitescreen.png :align: center **money** ^^^^^^^^^ `Back to Top`_ This will set the type of currency. Structure: .. code-block:: go `uadmin:"money"` Open your Todo List project, go to the item.go and set the money tag in the Cost field. .. code-block:: go package models import "github.com/uadmin/uadmin" // Item model ... type Item struct { uadmin.Model Name string Description string Cost int `uadmin:"money"` // <-- place it here Rating int } Let's run the application and see what happens. .. image:: assets/moneytagapplied.png **multilingual** ^^^^^^^^^^^^^^^^ `Back to Top`_ A tag that allows the user to use more than two languages for input Structure: .. code-block:: go `uadmin:"multilingual"` Open your Todo List project, go to the item.go and set the multilingual tag in the Description field. .. code-block:: go package models import "github.com/uadmin/uadmin" // Item model ... type Item struct { uadmin.Model Name string Description string `uadmin:"multilingual"` // <-- place it here Cost int Rating int } Let's run the application and see what happens. .. image:: assets/multilingualtagapplied.png | If you want to add more languages in your model, go to the Languages in the uAdmin dashboard. .. image:: tutorial/assets/languageshighlighted.png | Let's say I want to add Chinese and Tagalog in the Item model. In order to do that, set the Active as enabled. .. image:: tutorial/assets/activehighlighted.png | Now go back to the Item model and see what happens. .. image:: tutorial/assets/multilingualtagappliedmultiple.png As expected, Chinese and Tagalog languages were added in the Description field. To customize your own languages, click `here`_ for the instructions. .. _here: https://medium.com/@twistedhardware/uadmin-the-golang-web-framework-4-customizing-dashboard-d96d90792a07 **password** ^^^^^^^^^^^^ `Back to Top`_ A string of characters that hides the input data for security Structure: .. code-block:: go `uadmin:"password"` Open your Todo List project, go to the friend.go and set the password tag in the Password field. .. code-block:: go package models import "github.com/uadmin/uadmin" // Friend model ... type Friend struct { uadmin.Model Name string Email string Password string `uadmin:"password"` // <-- place it here } Let's run the application to see the output. .. image:: assets/passwordtagapplied.png In this case, the string of characters will hide every time you input something in the password field. If you want to show your input, click the eye icon button on the right side highlighted above. **progress_bar** ^^^^^^^^^^^^^^^^ `Back to Top`_ A feature used to measure the progress of the activity Structure (default): .. code-block:: go `uadmin:"progress_bar"` // Any number from 0 to 100 will display blue as the default color. Structure (one parameter): .. code-block:: go `uadmin:"progress_bar:100:orange"` // Any number from 0 to 100 will display orange color. Structure (multiple parameters): .. code-block:: go `uadmin:"progress_bar:40:red,70:yellow,100:green"` // Any number from 0 to 40 will display red color; 41 to 70 will display yellow color; 71 and above will display green color. Open your Todo project. Go to your main.go and let's use the default tag of the Progress field to **`uadmin:"progress_bar"`** inside the TODO struct. Copy this code below: .. code-block:: go Progress int `uadmin:"progress_bar"` To the todo.go inside the models folder .. code-block:: go package models import ( "time" "github.com/uadmin/uadmin" ) // TODO model ... type TODO struct { uadmin.Model Name string Description string `uadmin:"html"` TargetDate time.Time Progress int `uadmin:"progress_bar"` // <-- place the tag here } To run your code: .. code-block:: bash $ cd ~/go/src/github.com/your_name/todo $ go build; ./todo [ OK ] Initializing DB: [13/13] [ OK ] Synching System Settings: [51/51] [ OK ] Server Started: http://127.0.0.1:8000 Let's open the Todos model. .. image:: tutorial/assets/uadmindashboard.png | On the right side, click Add New Todo. .. image:: tutorial/assets/todomodel.png | Input the progress value to 50 then let's see what happens. .. image:: tutorial/assets/todomodelcreate.png | Tada! The progress bar is set to 50% with the blue color as the default one. .. image:: tutorial/assets/todomodeloutput.png | If you want to change the color of the progress bar, let's set a parameter and the value inside the tag. Go back to your main.go again. Let's say I want to display an orange color between the range of 0 to 100. Add this piece of code after the progress_bar tag: **:100:orange** (100 is the value and orange is the parameter) .. code-block:: go // TODO model ... type TODO struct { uadmin.Model Name string Description string `uadmin:"html"` TargetDate time.Time Progress int `uadmin:"progress_bar:100:orange"` // <-- place the tag here } Run your code again, go to the Todos model in the uAdmin dashboard then replace the value of the progress bar to something like 30. .. image:: assets/progress30.png .. image:: assets/progress30output.png | If you want some conditions on your progress bar, let's set multiple parameters inside the tag. Let's say I want to display a red color between the range of 0 to 40, yellow color between 41 to 70, and green color between 71 to 100. Add this piece of code after the progress_bar tag: **:40:red,70:yellow,100:green** .. code-block:: go // TODO model ... type TODO struct { uadmin.Model Name string Description string `uadmin:"html"` TargetDate time.Time Progress int `uadmin:"progress_bar:40:red,70:yellow,100:green"` // <-- place the tag here } Run your code again, go to the Todos model in the uAdmin dashboard then replace the value of the progress bar to something like 20. .. image:: assets/progress20.png .. image:: assets/progress20output.png | What if I set the value in the progress bar to 60? .. image:: assets/progress60.png .. image:: assets/progress60output.png | How about 90? .. image:: assets/progress90.png .. image:: assets/progress90output.png Well done! You have mastered the concepts of creating and modifying the progress bar in the model. **webcam** ^^^^^^^^^^ `Back to Top`_ A feature which adds web can access directly from the image and file fields (`Back To Top`_) .. _Back To Top: https://uadmin-docs.readthedocs.io/en/latest/tags.html#id4 Structure: .. code-block:: go `uadmin:"webcam"` Open your Todo List project, go to friend.go inside the models folder, and apply the following codes below: .. code-block:: go // Friend model ... type Friend struct { uadmin.Model Name string // Add this field with the type tag of image first followed by the // webcam tag to capture a photo in real time ProfilePic string `uadmin:"image;webcam"` Email string Password string } Run your application, go to the Friend model and click Add New Friend button on the top right corner of the screen. As expected, there is a camera tag on the right side of the ProfilePic input field. If you have a webcam installed on your computer, click that icon and see it for yourself. .. image:: api/assets/webcamiconhighlighted.png Reference --------- .. [#f1] Rouse, Margaret (2005, April). Tag. Retrieved from https://searchmicroservices.techtarget.com/definition/tag