Appearance

Patterns - comment ajouter / modifier ​

Ajouter un widget ​

Un widget = 4 elements (le JS et le SCSS sont optionnels selon l'interactivite). Voir l'anatomie detaillee dans ../modules/widgets.md.

  1. ViewComponent : creer Widget<Nom>ViewComponent.cs dans App.Core/ViewComponents/, heriter de ViewComponent, implementer InvokeAsync(BlockGridItem item), injecter ce qu'il faut (IDomainService pour le skin, Ii18nService, ...), retourner View("Default", model).
  2. Vue : src/Nanoxi/.../App.Core/Views/Components/Widget<Nom>/Default.cshtml. Si interactif, emettre l'init JS : window.Widget<Nom>.addNewInstance("@Model.ContentKey").
  3. View model : dans App.Model/ViewModel/Component/.
  4. Document type : ajouter le widget<Nom> (+ widget<Nom>Settings) dans uSync (src/Umbraco/uSync/v9/ContentTypes/), et l'autoriser dans le BlockGrid.
  5. SCSS (si style) : src/Nanoxi/Design/{skin}/css/component/widget<nom>/ (trio _roots/_foundation/_customer) + bundle bundles/bundle-widget<nom>.scss, puis declarer le bundle dans vite.config.ts.
  6. TypeScript (si interactif) : src/Nanoxi/TypeScript/ts/component/widget<nom>/Widget<Nom>.ts (+ ...Item.ts) + entree bundles/bundle-widget<nom>.ts, puis declarer dans vite.config.ts.

Ajouter un service ​

  1. Definir l'interface dans App.Interface (IXxxService).
  2. Implementer dans le projet adequat (Services/XxxService.cs).
  3. Enregistrer dans src/Umbraco/Program.cs (services.AddScoped<IXxxService, XxxService>()).
  4. Injecter par constructeur la ou c'est utilise.

Ajouter un repository (donnees custom NPoco) ​

  1. Modele/mapping dans App.Repository/Mapping/ avec [TableName("nanoxi_...")] + [PrimaryKey("Id")].
  2. Interface dans App.Interface, implementation dans App.Repository/Repositories/ injectant IScopeProvider.
  3. Toujours encapsuler dans using (var scope = _scopeProvider.CreateScope()) { ... scope.Complete(); }.
  4. Enregistrer dans Program.cs.
  5. La table doit exister : ajouter le script de creation dans data/01.Scratch/ (prefixe ordonne) ou via migration.

Ajouter une validation de formulaire ​

  1. Creer AbstractValidator<TViewModel> dans App.Validation.
  2. Enregistrer services.AddTransient<IValidator<TViewModel>, TValidator>() dans Program.cs.
  3. Cote vue, FormHelper traduit en validation client (jQuery Validation).

Ajouter un document type / une composition ​

Editer via le backoffice Umbraco puis exporter avec uSync (les .config apparaissent sous src/Umbraco/uSync/v9/ContentTypes/), OU ecrire directement le .config. Attention aux alias reserves (voir business-rules.md). Utiliser les compositions existantes (compositionSeo, compositionSitemap, compositionWidget).

Ajouter un workflow Umbraco Forms ​

  1. Creer la classe dans App.UmbracoForms/Workflows/, heriter de Umbraco.Forms.Core.WorkflowType (ou BaseEmailWorkflowType pour un mail). Definir Id/Name/Alias/Description/Icon/Group dans le constructeur.
  2. Exposer les reglages avec [Setting(...)] (View = "TextField", "Checkbox", "richtext", ...). Valider dans ValidateSettings().
  3. Implementer ExecuteAsync(WorkflowExecutionContext context) : context.Record (champs, UniqueId, UmbracoPageId), context.Form (nom). Pour un service scoped (repository), resoudre via IServiceScopeFactory.CreateScope() (cf. RequestPaymentWorkflow/SendRazorEmailNanoxi).
  4. Enregistrer dans App.UmbracoForms/SiteComposer.cs : builder.WithCollectionBuilder<WorkflowCollectionBuilder>().Add<MonWorkflow>().

Ajouter un dashboard back-office ​

  1. Creer src/Nanoxi/Custom/Umbraco/App_Plugins/<Nom>/ avec package.manifest (declare dashboards + javascript), <nom>.controller.js (angular.module("umbraco").controller), <nom>.resource.js (factory $http vers l'API), <nom>.html, et Lang/fr-CH.xml (libelle de l'onglet via dashboardTabs/<alias>).
  2. Backend : XxxApiController : UmbracoApiController dans App.Api/Controllers/ (routes /Umbraco/Api/XxxApi/{action}).
  3. Modele de la section visee dans package.manifest ("sections": ["content"]).

Ajouter une route custom ​

Dans src/Umbraco/Program.cs, apres le mapping des endpoints Umbraco (les routes Sitemap/Robots/RSS y sont declarees comme exemples).

Email ​

IEmailService rend un template Razor via IViewRender puis envoie en SMTP (IOptions<SmtpOptions>, Mailgun). Les templates vivent dans App.Mail/Templates/ (copies au build vers Views/Partials/Templates).

Contributors

No contributors

Changelog

No recent changes