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 Tile layout seems to be ready. You can check on branch how it looks like now. Remaining task is adjust breadcrump to be clickable.

[JoelProminic]

Category	Confirmed children and sort
portal	Confirmed
markeplace	Confirmed
cloud	Confirmed
developer	Confirmed
security	Confirmed
communication	Confirmed

Bugs:

• Breadcrumbs not working inside Category - need to use Back to return to "Getting Started" (already reported above)
• Clicking a DocumentationForm tile updates the breadcrumb but does not open the documentation. I'm thinking we should move away from the double-click requirement, but we can discuss this tomorrow
• Double-click opens DocumentationForm in edit mode rather than read-only mode. Back returns me to read-only mode

[JoelProminic]

Testing the remaining agents, I found that the Order parameter was incorrectly flagged as a TEXT fields instead of a NUMBER. I have fixed this. I did some quick tests with today's GUI build, and confirmed that it still worked with type change.

The Create, Update, and Delete agents follow the same pattern as the other Moonshine-Domino-CRUD agents. They also support the full list of Properties from here.

As a reminder, use the DominoUniversalID as the key for Update and Delete agents instead of CategoryID.

Example of CategoryUpdate

curl -X POST -H "Content-Type: application/x-www-form-urlencoded" \
--insecure \
-d "DominoUniversalID=86258B3B0079C1EA86258B3A0076AE4D" \
-d "CategoryID=portal2" \
-d "Description=Joel wuz here" \
-d "Label=Using This Portal" \
-d "Icon=grid_view" \
-d "Order=25" \
-d "" \
https://domino.demo.startcloud.com/SuperHumanPortal.nsf/CategoryUpdate?OpenAgent

Example of CategoryCreate:

curl -X POST -H "Content-Type: application/x-www-form-urlencoded" \
--insecure \
-d "CategoryID=test" \
-d "Label=TestCategory" \
-d "Description=Testing adding and deleting categories" \
-d "Icon=grid_view" \
-d "Order=100" \
-d "" \
https://domino.demo.startcloud.com/SuperHumanPortal.nsf/CategoryCreate?OpenAgent

Example of CategoryDelete: https://domino.demo.startcloud.com/SuperHumanPortal.nsf/CategoryDelete?OpenAgent&DominoUniversalID=E81A1D615A4156BA86258B3F006DDCFF

We don't necessarily need to incorporate the editing logic yet in the GUI, but I wanted to get this tested and written up before I moved on to the next step.

[piotrzarzycki21]

Testing the remaining agents, I found that the Order parameter was incorrectly flagged as a TEXT fields instead of a NUMBER. I have fixed this. I did some quick tests with today's GUI build, and confirmed that it still worked with type change.

The Create, Update, and Delete agents follow the same pattern as the other Moonshine-Domino-CRUD agents. They also support the full list of Properties from here.

As a reminder, use the DominoUniversalID as the key for Update and Delete agents instead of CategoryID.

Example of CategoryUpdate

curl -X POST -H "Content-Type: application/x-www-form-urlencoded" \

--insecure \

-d "DominoUniversalID=86258B3B0079C1EA86258B3A0076AE4D" \

-d "CategoryID=portal2" \

-d "Description=Joel wuz here" \

-d "Label=Using This Portal" \

-d "Icon=grid_view" \

-d "Order=25" \

-d "" \

https://domino.demo.startcloud.com/SuperHumanPortal.nsf/CategoryUpdate?OpenAgent

Example of CategoryCreate:

curl -X POST -H "Content-Type: application/x-www-form-urlencoded" \

--insecure \

-d "CategoryID=test" \

-d "Label=TestCategory" \

-d "Description=Testing adding and deleting categories" \

-d "Icon=grid_view" \

-d "Order=100" \

-d "" \

https://domino.demo.startcloud.com/SuperHumanPortal.nsf/CategoryCreate?OpenAgent

Example of CategoryDelete: https://domino.demo.startcloud.com/SuperHumanPortal.nsf/CategoryDelete?OpenAgent&DominoUniversalID=E81A1D615A4156BA86258B3F006DDCFF

We don't necessarily need to incorporate the editing logic yet in the GUI, but I wanted to get this tested and written up before I moved on to the next step.

@JoelProminic That's funny because I cast what came from you to Number(Order) without thinking whether it has good type or not. You were sending me numbers as String so cast resolve issue, now when you change that on your sight cast is not needed, but also do not break anything. ;)

[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.