The menu - WilStead/VueCoreFramework GitHub Wiki

The Static Menu

There is an object called uiState in ClientApp/store/uiStore.ts with an array property called menuItems which describes the static menu items that will appear on the site's navigation menu. See the MenuItem interface in the same file for documentation of the format the array's items must fit.

One of the menu items must have a true dataHook property, which tells VueCoreFramework which menu item is the root where all dynamically added data items will be appended.

Dynamic Menu Items

In order to get your data to appear on the front end site, at least one of your Entity Framework entity classes must be decorated with the MenuClassAttribute class attribute (see Data.Attributes.CustomAttributes for documentation). Classes with this attribute will be automatically added to the site's main navigation menu.

The Category property allows you to customize the exact structure of the menu, and to locate your class exactly where you wish within it. It accepts a string with the format "supertype/type/subtype", with as many levels in the hierarchy as you like. The class you are decorating is always the last segment in the chain, and the string used for the segment will replace the class name as the menu item's text. If any segment prior to the last doesn't already exist in the menu, it will be added; and if any other data classes re-use those segments, they will be combined.

Note that the category hierarchy you create in your menu doesn't necessarily need to have anything to do with the actual relationships that exist in the database. This allows you to create a clear, user-friendly navigation scheme regardless of how complex your data schema may be.

Entities without Menu Items

Any entity classes which you do not decorate with the MenuClassAttribute will not appear on the navigation menu, and therefore will only be accessible on the client front end through navigation properties on the items which you do add to the menu. This allows you to define certain classes as "top-level" classes which can be accessed directly, while others are "child" types which are only found by clicking through properties on the top-level items.

This can be especially helpful for classes which are in a many-to-one relationship, or are the dependent entity in a one-to-one relationship, since it is more likely that users should interact with them only in the context of their "parent" object, and not as a collection unto themselves. This is not required, however, provided you design your relationships and cascade scenarios well.

All Entity Types

You can decorate non-MenuClass entity classes with the DataClassAttribute, from which MenuClassAttribute inherits. This base Attribute class allows you to set certain properties which define the look of your data on the client front end, whether the type gets an entry in the menu or not.

  • IconClass - This property allows you to assign an icon which will appear in the menu (if applicable) and on the dashboard for the data type. The property accepts a string, which must be the name of a Material Icon (replace spaces with underscores), or a FontAwesome icon. If you use a FontAwesome icon, you must also set the FontAwesome property to true.
  • DashboardTableContent - This property allows you to specify the path to a Vue component which will be shown on the class' front end dashboard above data tables. The path is considered relative to the ClientApp/components/data folder.
  • DashboardFormContent - Similar to DashboardTableContent, this property allows you to specify the path to a Vue component which will be shown above data forms (for viewing and editing individual items). This component will receive the type of operation being performed (see Services.CustomClaimTypes) and the primary key of the item as props called "operation" and "id, respectively.