uAdmin the Golang Web Framework #4 Customizing Dashboard

The dashboard of your app is the first impression that users will get from your app. Making it look good and customizing it to meet your customers requirements is important to the success of your app. We will start by adding icons to your the models that you already added to your dashboard.

To do that open “DASHBOARD MENU”.

Open “Tasks” and search for an icon that you like to add to your dashboard to represent a task. By default any model that does not have an icon gets this icon:

I would suggest you find an icon from flaticon.com to keep the style of the dashboard, but feel free to change the style and make it yours. If you are getting your icon from flaticon.com, search for an icon and download the PNG version and choose the size 128 pixels.

Now that you have downloaded your icon, you add add it to “Task” in “DASHBOARD MENU” and Save.

You should be able to see the icon in the list view of your “DASHBOARD MENU”

Go back to your dashboard and see your model’s new icon.

Now do that same thing to “TODOS” and find an icon that you like for that one.

Once we are done with icons, let’s activate another language in uAdmin. To do that, go to “LANGUAGES” and find a any language that you like to activate besides English which is a activated already. For me I’ll activate the “Arabic” language (since it is my first language). To do that open “LANGUAGES” then use the search to find your language.

Now open that language and change “Active” to true.

For now don’t worry about these other toggle boxes, just change “Active” to true and Save.

Go back to your dashboard and open “DASHBOARD MENU” and open “Tasks” and you will see that your “Name” field has two fields inside it, one for English and one for Arabic. Notice that the Arabic one has a red “X” next to it indicating it is not translated yet.

Enter the name of the model in your language. In Arabic Tasks is “المهام”.

Save your model and notice that the Arabic name has turned green showing it is translated already.

To switch your language, logout and login again and change the language to Arabic during login.

Notice it your dashboard that “TASKS” is translated

Now we will stop our add and start it again, and you will see this:

It is giving you a warning saying that you didn’t translate your models into the newly activated language “Arabic”. To do that look in your project path and you will see a folder named /static/i18n/ which includes automatically generated files for all activated languages.

you will see three folders under /static/i18n/:

• main: is not important because this was automatically generated before you moved our models to models package.
• models: is your the folder with your app models
• uadmin: is uAdmin system models

Open /static/i18n/models/task.ar.json and you will get this:

Any field that starts with Translate me ---> should be translated. After translating my file, now it looks like this:

{
  "display_name": "المهام",
  "fields": {
    "ID": {
      "display_name": "ID",
      "help": "",
      "pattern_msg": "",
      "err_msg": {},
      "Choices": null
    },
    "Name": {
      "display_name": "الاسم",
      "help": "",
      "pattern_msg": "",
      "err_msg": {},
      "Choices": null
    },
    "TotalProgress": {
      "display_name": "إجمالي الانجاز",
      "help": "",
      "pattern_msg": "",
      "err_msg": {},
      "Choices": null
    }
  }
}

Save your file and run your app again and you will get this:

uAdmin has found the 4 words we translated and is telling us we are at 3% translation for the Arabic language. We can translate each file and get this to 100% to make the warning message go away. This good thing is this can be done during development and ad you add new fields they will be added to your active language and it will keep track of what is currently translated you work on development.

Login again in “Arabic” and check your “TASKS” and you will get this:

Congrats. This was a code-free tutorial but we got so much done without writing a single line of code:

• Customize dashboard models with icons
• Activate other languages
• Translate your model name in other languages
• Translate your model field names in other language

In the part 5, we will talk about validation server-side and client-side.