umbraco / ui-examples

UI Examples is a package that adds a new 'UI Examples' section to your Umbraco instance with working examples of how to customise the backoffice.

Umbraco UI Examples

Important

Hey you! Are you looking to get involved in development of the Umbraco v14 version? Head over to the dev/v14 branch to get started. P.S. We've also tagged a bunch of issues with Umbraco 14 ripe for the picking.

UI Examples is a package that adds a new 'UI Examples' section to your Umbraco instance with working examples of how to customise the backoffice. During installation the Administrators user group will be given access to the section.

https://our.umbraco.com/packages/developer-tools/ui-examples/

Examples include:

• UmbBox
• Layout
• Dialogs
• Icons
• Buttons
• Tabs
• Editor Panels
• Alerts

This repository contains examples of the current backoffice UI, which are not (yet) based on the new Umbraco UI Library.

Installing the Package

Umbraco v8: the UI Examples package can be added via the Package section of the backoffice or using NuGet (e.g. from the Package Manager Console: Install-Package Our.Umbraco.UiExamples).

Umbraco v9: install the NuGet package using dotnet add package Our.Umbraco.UiExamples or manually adding a PackageReference to your project file.

Contributing

Contributions are welcome! Please refer to the issues list for ideas of where help is needed.

Please read our contribution guidelines for more information.

ui-examples's Issues

Add collapse to Umb-Box

The Umb-Box directive has the ability to allow collapsing.
This is currently not implemented in the samples.

It would be nice to have a sample in the package.

Test website's App_Plugins folder in source control?

Do these folders need to be source controlled?

• https://github.com/umbraco/UI-Examples/tree/master/src/UIExamples.Website/App_Plugins/uiexamples
• https://github.com/umbraco/UI-Examples/tree/master/src/UIExamples.v9.Website/App_Plugins/uiexamples

As the "source of truth" for those files are from here...

• https://github.com/umbraco/UI-Examples/tree/master/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples

...and those are copied across to the test websites with Gulp?

Ultimately, my bugbear is that when I make a change to a file, it is copied over to both v8 & v9 websites, and version-able in my Git repository. So either, should we remove those from the Git repo? or when I submit a pull-request, should I commit those too?

Implement the Button section view

Current implementation is here.

How do we package this up?

Package format in Umbraco 14 is different to that of previous versions. The current setup is that the umbraco-package.json files (which defines the package) sits within samples\Umbraco14.Website\App_Plugins\Example.UI\umbraco-package.json - this should be within the actual package project and copy across during build.

Migrate 'UI-Examples' to Bellissima

Important

You will need to head over to the dev/v14 branch to get started.

Tasks

Beta Give feedback

1. General layout of the template #30
   Umbraco 14 help wanted +2
2. Implement the UmbBox section view #32
   Umbraco 14 help wanted +2
3. Implement the layout section view #33
   Umbraco 14 help wanted +2
4. Implement the Dialogs section view #34
   Umbraco 14 help wanted +2
5. Implement the Icons section view #35
   Umbraco 14 help wanted +2
6. Implement the Button section view #36
   Umbraco 14 help wanted +2
7. Implement the Tabs section view #37
   Umbraco 14 help wanted +2
8. Implement the Editor Panels section view #38
   Umbraco 14 help wanted +2
9. Implement the Alerts section view #39
   Umbraco 14 help wanted +2
10. How do we package this up? #29
    Umbraco 14 +1

Implement the layout section view

Current implementation is here.

Implement the Icons section view

Current implementation is here.

Implement the Alerts section view

Current implementation is here.

Sample for alerts/notifications

We would like to have examples of how to show alerts and notifications in the backoffice.

These can be triggered from a button for example.

Site wont run with the default setup

Hey there!

Wanted to contribute something to this repo so started by cloning it down. With the connection string and version number both being filled out in the .website web.config the site will not start up:

If you remove the version in web.config the installer will run for fresh clones and set up the db, etc as normally 🙂

Advanced: Add file upload/download

We would like to show examples of how to download and upload files in the backoffice

Implement "section views" for the layout of the package

Section views should be added so that we can follow the same layout as the current package. This should use the Section Views.

This refers to the content-app style buttons at the top right.

Add samples of input fields

We would like to show sample configuration of different input fields:

• Textbox
• Area
• Richtext
• Checkbox
• Toggle
• DatePicker

Enhance icon list

For enhancing the icon list we thought of these two neat features:

• Search for icons
• Adding custom icons

which would be quite beneficial for better usablility.

Enhance button samples

For buttons, we would like to add the following missing parts

• Button states
• Pop-outs (slide out from the right - infinite editor)
• Dialogs - media picker, content picker, etc.

Add sample for tables/lists

For this we think of samples for

• Tables
• Lists
• Pagination

Implement the UmbBox section view

Current implementation is here.

Advanced: Add a tour of the section

It is possible to have tours of sections for new users.

These tours can show different parts of the section and guide new users on what they can do.

It would be a nice addition to have this for the UI-Examples

Implement the Dialogs section view

Note Dialogs have now been renamed to modals and has been completely restructured for the new back office. Read more about modals here.

Current implementation is here. The new implementation should show a demo of both self-initialised modals and global, context driven, modals.

General layout of the template

The welcome dashboard needs completed to act as the template for use with other areas.

• Correct button styling to have a book, and link to the correct place (https://docs.umbraco.com/umbraco-backoffice/)
• Update the copy to make a point about the new back office
• Add supporting comments to the ts file to explain more about the structure and how to extend
• Make a note that the documentation links may change (especially around the UUI backoffice story book references)

Implement the Editor Panels section view

Current implementation is here

Implement the Tabs section view

Current implementation is here

Add localization sample

Add a sample for how to use localization.

• This can be a "fixed" label.
• An html text in a div.
• Translations for a button