Update Getting Started Page with Tile Layout

[JoelProminic]

@JustinProminic would like to improve the appearance of the Getting Started page, since it will be the first user experience when opening the application.

His proposal was to have a tiled interface instead (example

It doesn't have to look exactly like this, but this is a starting point.

[JoelProminic]

To support the categories, I'll need some agent and database updates:

• Add a form for Categories so that we can store the description and title without duplication. This will need a corresponding view
• Add a new field/property to the Documentation form and DocumentationRead agent to link to the categories. I envision this as a multi-value field so that we can assign an article to multiple categories/tags.
• Update DocumentationRead or create a new agent to return the categories

[piotrzarzycki21]

I have started to implement this in a separate project without including it yet in SHP. I've decided to use TileView from DevExpress as a most robust way of displaying cards. I will try to finish something on Monday and post here screenshots.

[piotrzarzycki21]

This is current state and idea in Light and Dark mode:

[piotrzarzycki21]

• Update page with bread crump
• Sub views available under categories should be tiles as well.

[piotrzarzycki21]

@JoelProminic It would be good to have method which returns for me items for specific categories, if possible.

[piotrzarzycki21]

I have added interaction with Tile layout. I'm displaying instead of DataGrid tiles. Basic breadcrump is added, without interaction and going too deep right now. I will get more into that implementation once I get categories.

[JoelProminic]

Proposed categories from a previous meeting:

Using this Portal
Run your Notes application in the cloud from any browser. Add bookmarks to key company resources for your employees -- both Domino databases and external URLs to for example your payroll time tracking system.

Application Marketplace
Explore free and paid applications you can add to your environment. These range from simple utility apps to complex CRMs.

Cloud Desktops & Mobile e-mail
Mobile e-mail is just the first step. Your entire set of Windows applications can be run in Cloud Desktops. This gives all of your staff a consistent interface and aids in recovery from ransomware attacks.

Developer's Corner
Do you want to build a new app for Domino? Browser based, Mobile first, REST, JSON, native Mac, Windows, Linux, and more? There are more ways than ever to deliver compelling user experiences with Domino.

MFA, Security, & Compliance
Multi-Factor Authentication is critical in today's world. Security training for your employees. Assess compliance needs ahead of your annual cyber liability insurance policy renewals.

Verse, Calendaring, & Meetings
Group calendaring helps your team stay organized and connected to vendors and customers. Schedule integration with MS Teams, Zoom, WebEx, GoToMeting, and Sametime directly from Notes and Verse. The Verse e-mail interface groups your key communications automatically.

[JoelProminic]

I pushed some updates to the Domino Visual Editor project, but these probably won't be useful for now. I'll generate the new agent tomorrow and send @piotrzarzycki21 a copy of the updated database. I sent an email so that @JustinProminic can start reviewing the categorization of the Documentation Forms

[JoelProminic]

@piotrzarzycki21, I have created the initial agents. I'll send you a copy of the database by email.

To read the Categories, use: /SuperHumanPortal.nsf/CategoryRead?OpenAgent

{
  "documents": [
    {
      "CategoryID": "portal",
      "Order": "10",
      "DominoUniversalID": "86258B3B0079C1EA86258B3A0076AE4D",
      "Description": "Run your Notes application in the cloud from any browser. Add bookmarks to key company resources for your employees -- both Domino databases and external URLs to for example your payroll time tracking system.",
      "Label": "Using this Portal",
      "Icon": "grid_view"
    },
    ...
  ],
  "errorMessage": "",
  "state": "authenticated",
  "common_name": "Anonymous",
  "username": "Anonymous",
  "status": "authenticated"
}

Property	Type	Notes
CategoryID	String	Unique identifier for the category. Also used in the Categories property for DocumentationForm (see below)
Order	Double	Determines the position relative to the other category. The entries in CategoryRead are already sorted by Order
DominoUniversalID	String	Use this for future Create/Update/Delete operations, instead of the CategoryID Key
Description	String	The description to display for the category, from @JustinProminic's writeup
Label	String	The name of the category
Icon	String	The name of the Material Design icon to use for this category

DocumentationFormRead was updated with the Categories property, which is a list of CategoryIDs. Each DocumentationForm should be assigned to at least one property (not enforced by the agents, currently):

{
  "documents": [
    {
      "DocumentationBody": "-snip-",
      "DominoUniversalID": "86258B3B0079C1EA862589A2006E7550",
      "Categories": [
        "developer"
      ],
      "DocumentationName": "Volt MX for Low-Code Development",
      "DocumentationUNID": "0"
    },
    {
      "DocumentationBody": "-snip-",
      "DominoUniversalID": "86258B3B0079C1EA862589350026CFB3",
      "Categories": [
        "marketplace",
        "portal"
      ],
      "DocumentationName": "Genesis.Directory for discovering new Domino applications",
      "DocumentationUNID": "1"
    },

For agent security, I matched the DocumentationForm agents. Currently, this means that the agents are accessible to all users. They are limited on the UI side by the ui_documentation_editable properly, but the agents do not check this - I may make a quick update for this.

TODO:

• Let me know if you still want a way to read the DocumentationForms by CategoryID. This shouldn't be hard to add, but it would slow down the interface a little.
• I generated Create, Update, and Delete agents as well, but I intend to do more testing for this before I write them up. In any case, I think we may wan to save editing the categories for the next iteration.

[piotrzarzycki21]

• Let me know if you still want a way to read the DocumentationForms by CategoryID. This shouldn't be hard to add, but it would slow down the interface a little.

@JoelProminic I thin it won't be necessary. There is not much Documents in that case, so I have pushed changes where I'm loading at the same time Categories and Documentations - I will filter results on UI sights.

Remaining tasks:

• Filtering when user clicks on category
• Adjust breadcrump

I will try to finish this over weekend. You can try current changes.

[JoelProminic]

I installed a build from here. This looks like a good start.

[piotrzarzycki21]

@JoelProminic I think I have finished Tile interface.

• Breadcrump is working
• I removed double click

We should review stuff during our call.

[piotrzarzycki21]

Prepare list of icons for all items under categories for @JoelProminic

[JoelProminic]

Alternatively, you could prepare a short list of generic icons and then alternate between them when generating the entries for a category. I suspect some of these articles won't have obvious icons.

On the agent and database side, I should just need to add an Icon field to DocumentationForm similar to what I have for Category. If this is blank or null, Super.Human.Portal should use a default entry (or an entry from a short list, as described above).

[piotrzarzycki21]

@JoelProminic Here is list of material icons. Some of them may not be necessary suit to item and in case of other s when I didn't know what to put I stayed with default one.

I think we should in long term prepare some proper images for each of these items. I would rather you to add for that purpose two fields:

icon - represents some material icon
image - represents image - non material one.

I have implemented things on my sight ant it's pushed to branch.

[JoelProminic]

@piotrzarzycki21, how do you envision the image field/property working? Would this be:

• A reference to an image bundled in the application? This is a pain on the Genesis side, because I need to attach each file manually
• An image stored in the database that needs to made available to the application. This might be doable, but it would take some extra work on the agent side.

I would prefer to stick with icons unless we really can't get a satisfactory result with icons only.

[piotrzarzycki21]

Both option for me are ok, whatever you think is better and more convenient on your sight. Third option is to have them stored somewhere on the serve disk and provide trough image property a link.

[piotrzarzycki21]

@JoelProminic We should think to move this issue to 1.0. If you add images/icons to sub categories it will be ready.

[piotrzarzycki21]

cloud
2 - public
14 - smartphone
30 - groups
70 - folder_managed
71 - component_exchange

communication
3 - deployed_code_update
11 - open_in_browser
12 - date_range
13 - view_timeline
18 - view_agenda
43 - perm_phone_msg
70 - folder_managed

developer
0 - electric_meter
2 - public
3 - deployed_code_update
15 - developer_mode
16 - api
17 - package
22 - waterfall_chart
41 - engineering
42 - image
43 - perm_phone_msg
71 - component_exchange

marketplace
1 - folder
21 - image

security
10 - gate
20 - security_key
50 - arrow_selector_tool
51 - shield
52 - trending_up
53 - domain
54 - dns
55 - image
60 - policy
61 - image
62 - image
63 - rate_review

[JoelProminic]

I updated the DocumentationForm agents with the Icon property. I sent an updated database with the icons populated. The icon list above was very helpful, thanks. I updated a couple of the "image" icons, but I didn't have any problems with the other cases.

[piotrzarzycki21]

I have pushed fix for icons, because after your update initially they didn't display. Unfortunately some icons displays in a weird way. You can check that in my last push. I'm going to change this set of icons to different one - also material design but not from google. I will prepare for you new set of names. They are going to be taken from here:

https://pictogrammers.com/library/mdi/

We are using these icons as well in MyAccount.

[piotrzarzycki21]

@JoelProminic here is new refreshed lists of icons. Pull my changes in repository as well.

Categories:
10 - mdi mdi-view-grid-outline
20 - mdi mdi-storefront-outline
30 - mdi mdi-cloud-outline
40 - mdi mdi-code-tags
50 - mdi mdi-lock
60 - mdi mdi-account-group

cloud
2 - mdi mdi-earth
14 - mdi mdi-cellphone
30 - mdi mdi-account-group-outline
70 - mdi mdi-folder-cog-outline
71 - mdi mdi-video-input-component

communication
3 - mdi mdi-code-block-braces
11 - mdi mdi-web
12 - mdi mdi-calendar-range
13 - mdi mdi-timeline-text-outline
18 - mdi mdi-view-agenda-outline
43 - mdi mdi-phone-message-outline
70 - mdi mdi-folder-cog-outline

developer
0 - mdi mdi-meter-electric-outline
2 - mdi mdi-earth
3 - mdi mdi-code-block-braces
15 - mdi mdi-code-block-tags
16 - mdi mdi-api
17 - mdi mdi-package-variant-closed
22 - mdi mdi-poll
41 - mdi mdi-assistant
42 - mdi mdi-image
43 - mdi mdi-phone-message-outline
71 - mdi mdi-video-input-component

marketplace
1 - mdi mdi-folder
40 - mdi mdi-server

portal
1 - mdi mdi-folder
21 - mdi mdi-image

security
10 - mdi mdi-gate
20 - mdi mdi-account-lock-outline
50 - mdi mdi-email-multiple-outline
51 - mdi mdi-shield-bug-outline
52 - mdi mdi-trending-up
53 - mdi mdi-domain
54 - mdi mdi-dns-outline
55 - mdi mdi-image
60 - mdi mdi-shield-lock-outline
61 - mdi mdi-image
62 - mdi mdi-locker
63 - mdi mdi-message-draw

[JoelProminic]

I just sent an updated copy of the database with the Pictogrammer icons. I checked the icons on domino-49, and they look good to me.

[piotrzarzycki21]

Should we merge this to main and add issue to current milestone ?

[piotrzarzycki21]

@JoelProminic This has been merged to main.

[JoelProminic]

I haven't noticed any problems in my tests with the release candidates.