Provide a few examples of applications using Office UI Fabric

[waldekmastykarz]

Currently the sample website available at dev.office.com/fabric shows how the different components work on their own but it's still challenging to figure out what the best way is to compose a complete application out of the different components. It would be extremely helpful for developers if you could provide a couple of dummy applications built using Office UI Fabric. The app wouldn't do anything but would show how the different components fit together in a single application.

[ericthompson]

I totally hear you on this one, @waldekmastykarz. We actually provide samples, but we're in dire need of updating our documentation to explain how to actually access them. We'll be doing this very, very soon.

In the meantime, I can walk you (and other folks who see this issue) through how to build, access, and even play around with the sample Form and Video Portal app:

1. Follow the instructions to clone, install dependencies, and build the repo.
2. You can use either gulp or gulp watch depending on whether you would like to just build the samples once, or you would like to build the samples and then watch the code so you can have it auto-rebuild as you play with it.
3. Once you've got things built, open the index.html file under [Fabric's root]\dist\samples to view a list of all of the samples Fabric provides. This includes all of the components and the more specific samples at the bottom of the page (Form or VideoPortal).
4. Remember, to play with the code and see your updates live (assuming you're using gulp watch) be sure you make your edits to the source files for the samples under [Fabric's root]\src\samples\[desired sample].

As you mentioned, these don't actually do anything, but should give you an idea of how folks on the Fabric team leverage the toolkit. We'll get this info up on our docs site asap. Sorry for the inconvenience here!

[waldekmastykarz]

I'll take a look at what's available and will let you know if it's what I mean. Thanks for the tip! 👍

[ericthompson]

No problem! Let us know if it isn't what you were looking for and we can investigate some alternatives.

[waldekmastykarz]

The Forms and Video Portal samples are kind of what I'm talking about. The Forms sample seems however to be broken (in Safari on OS X) and the Video Portal makes little use of the Office UI Fabric (nav bar only). It would be very helpful if you could extend these samples in the future to help us understand how the different pieces could be used to compose a complete UX 😄

[mikewheaton]

@waldekmastykarz: I've opened an issue for the Safari bug so that we can investigate it (could you elaborate there on what's happening?) and have added the need for additional samples to our roadmap.

[pschaeflein]

I've submitted a sample to the OfficeDev PnP repo that includes Fabric in an MVC app. It includes NavBar, Grid (including tabular data), CommandBar, SearchBox, Toogle, Dropdown and TextField.

It does not yet have a permanent url, but you can review the code at https://github.com/pschaeflein/PnP/tree/samples.office365api.groups/Samples/MicrosoftGraph.Office365.GroupsExplorer and track the PR at pnp/PnP#1307

[mikewheaton]

@pschaeflein: Nice! Would you mind messaging us once that PR has been approved and the sample is published? We'll include a link to it from our website.

[pschaeflein]

@mikewheaton Sample is here: https://github.com/OfficeDev/PnP/tree/master/Samples/MicrosoftGraph.Office365.GroupsExplorer

[priand]

Some of the links in this discussion are broken. Is there a sample page template showing a branded header, a footer, a basic navigation menu and a body?