https://discord.umbraco.com logo
Join Discord
Powered by
Umbraco UUI 30,000 foot overview please
# help-with-umbraco
a
Hello all. I'm trying to wrap my head around the umbraco.ui system and how it is intended to work in the backoffice. I understand that certain elements can be used right now, for example, in a package or backoffice App_Plugins Content App html file: ex. What I am not understanding is how to create / customize a uui component for use in the backoffice. What does this look like? say I wanted a custom table uui-table to support sorting and be populated by an ajax data source in a Content App. How would I build this? Do I need to create a separate node.js project, compile my own uui control, then include the js output of this somehow in my website? I'm seeing people use typescript but I don't know the context of this usage, I can't simply include typescript, 'import' statement and all, in my Content App js under App_Plugins. https://github.com/umbraco/Umbraco.UI/blob/v1/contrib/packages/uui-table/lib/uui-table-advanced-example.ts I don't know how to use this example in a Content App with, say, an ajax datasource. Any clarification on the expected build process for something like this would be appreciated.
o
Looking forward to the community participation in this thread. I’m starting a new project with a ton of custom backoffice development and I’ve been thinking about start using ui components instead of the regular way of do it…
To be honest, I think that it is the worst documented thing in the, otherwise, amazing Umbraco platform, the backoffice extensions. Some examples but nothing to fancy that helps with real world applications
s
The really short answer is: this is a library that Umbraco is using to build the new backoffice, and other projects. If you want a web component that is not in our library then you need to either build your own (and the name will be 
myuui
or something like that) and publish it on npm, OR you find another library that has the component that you want and see if you can add this to Umbraco.
It's early days, so I haven't seen any examples yet to point you to. And to add: you could contribute your functionality to the UUI library, but I'd make sure to create a feature request first to confirm if it's something that the UUI library wants to have. Correct me if I'm wrong @Jacob Overgaard
d
I've created a little starter project that bridges the gap between angularjs and lit. It allows you to build your application 98% on Lit and Typescript, while still keeping access to Umbraco services like editorState and notificationsService. It uses node 18 and Vite to build and bundle the javascript / typescript into a single javascript dependency that I can simply include with a package manifest. You can see it already in practice on this particular branch of the URL Tracker if you're interested: https://github.com/Infocaster/UrlTracker/tree/v10/feature/redesign/src/UrlTracker.Backoffice.UI
this is a dashboard, but for content apps, the principles are exactly the same
j
Hi everyone, I'm really excited to hear when people want to learn all of this! As Sebastiaan already said, the UI library is really a utility library with no real direct applications except for the few example components, we showcase on the Storybook at uui.umbraco.com in the "Examples" and "Composite" section. When the new Backoffice (Bellissima) lands, it will use the UI library to compose a bunch of "real" reusable components such as property editors, pickers, and maybe(?) a table. How to use it in the current backoffice is a bit... shall we say "undefined"... at the moment. The components of the UI library are there for consumption and we use some of them in the block grid editor ourselves. But most likely you'd want to build your own web components with something like Lit and to do so, it is best to use a build system and bridge the AngularJS services in to your components as properties (properties go in, events come out). (You can hook on to events coming out of web components with AngularJS as well with the syntax 
ng-on-<event name>
by the way) I would recommend you to have a look at what @D_Inventor posted here as a great example of doing just that. NB! If you don't want a fully fledged build system such as Vite and TypeScript, you can also work with Lit and Web Components with plain old JavaScript. All the examples on their docs are available as TS as well as JS: https://lit.dev/docs/
There was a concrete question about AJAX in the opening post of this thread A lot of the functionality, that we were used to being there through AngularJS has since a few years been available natively in all modern browsers including "AJAX". Using the Fetch API, you can do pretty much what you were used to in AngularJS just directly in the browser. Then there was the question how to bind an AJAX data source into a UUI table To do so in the current backoffice, you will most likely have to start out by using one of the AngularJS services to actually get the data, e.g. 
contentResource
. You will have to set up a normal AngularJS controller to inject and interact with this resource. Then in your template, you can iterate the data and set up the table by something like this:
Copy code
html
<div ng-controller="My.Own.Controller as vm">
  <uui-table>
    <uui-table-row ng-repeat="row in vm.data track by row.id">
      <uui-table-cell>{{ row.id }}</uui-table-cell>
      <uui-table-cell>{{ row.name }}</uui-table-cell>
    </uui-table-row>
  </uui-table>
</div>
Most likely you would start building your own small components to use in your controller template, and this is where Lit is a good tool to build simple Web Components. You have to include the code in a .js file somewhere in App_Plugins and make sure to load it through 
package.manifest
in the 
javascript
section and then it will be globally available throughout the backoffice.
a
Thank you all, this is exactly the info that I was looking for! 👍 I understand now that to build a custom component, I can do so, but it needs to be built in its own project, then the output js can be included in a package.manifest. If the existing umbraco web components will suffice, I can just reference them directly, populating them with existing angular js calls (for the time being). I also understand that a lot of this isn't concrete yet, as Umbraco is still actively working on the new backoffice solution.
j
Good summary! And you can in fact build custom components directly in javascript without a build system if you wish, but should probably be kept to a minimum if you want to have an easier migration path to the new backoffice when it lands 👌
2 Views
PreviousNext
Powered by