jQuery QueryBuilder has some dependencies:
https://querybuilder.js.org/#dependencies
@tidyui do you think there's something in that list that would break the app?
Not sure how to install Vue Query Builder as a custom field https://dabernathy89.github.io/vue-query-builder/getting-started.html
I've added VueQueryBuilder.umd.min.js to the Scripts collection and immediately after I add vue-query-builder-field.js:
app.UsePiranha(options =>
{
// Initialize Piranha
App.Init(options.Api);
Piranha.App.Fields.Register<VueQueryBuilderField>();
App.Modules.Manager().Scripts.Add("~/dist/vue-query-builder.min.js");
App.Modules.Manager().Scripts.Add("~/dist/vue-query-builder-field.js");
I can see in DevTools that both scripts are loaded.
My Vue component looks like this:
Vue.component("vue-query-builder-field", {
props: ["uid", "toolbar", "model", "meta"],
mounted: function () {
new Vue({
el: '#app',
data: { rules: [] },
components: { VueQueryBuilder: window.VueQueryBuilder }
});
},
template:
"<div id='#app'>" +
"<vue-query-builder :rules='rules'></vue-query-builder>" +
"</div>"
});
Then when I run the page in manager where I have my custom Vue Query Builder field I get a:
[Vue warn]: Unknown custom element: <vue-query-builder> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I have added components: { VueQueryBuilder: window.VueQueryBuilder } so not sure why it's complaining. Any ideas?
@spacecat
So to start with I used the Vue Developer tools which are a massive help if you haven't already got them installed they can be found Here
By default, the manager serializes the data within fields and blocks etc when being saved and restores the object from the stored JSON when they are loaded, from my understanding of it anyway, @tidyui may be able to correct me here if I've misunderstood it.
With this in mind, I know that whatever I use within a custom field class will be saved and restored through the manager without any intervention from myself.
After looking at the documentation for the VueQueryBuilder plugin I can see that the v-model only needs a blank object for the binding. So to start with I just created an empty object within the fields Vue script and then used the Vue developer tools to see what was being added to this object from the query builder component.
At this point, I had a few options to choose from
I went with the JObject mainly for preference and time as creating a custom class and ensuring it has all relevant properties etc could be time-consuming as there is little to no documentation on what the model could contain.
Hope this helps clarify it a little
I've created a custom field. From within InitManager(), how can I get SiteId?
In a MVC controller I can get it like this:
public async Task<IActionResult> CategoryPage(Guid id, bool draft = false)
{
var categoryPage = await _loader.GetPageAsync<CategoryPage>(id, HttpContext.User, draft);
var siteId = categoryPage.SiteId;
Hello guys, i am looking forward to start using Piranha CMS but i am struggling with basics. Could one of you please help me with this issue? I´ve created new project from template and also created new empty module from template. I´ve tried to implement that module into my site like this:
using Microsoft.EntityFrameworkCore;
using Piranha;
using Piranha.AttributeBuilder;
using Piranha.AspNetCore.Identity.SQLServer;
using Piranha.Data.EF.SQLServer;
using Piranha.Manager.Editor;
var builder = WebApplication.CreateBuilder(args);
builder.AddPiranha(options =>
{
/**
* This will enable automatic reload of .cshtml
* without restarting the application. However since
* this adds a slight overhead it should not be
* enabled in production.
*/
options.AddRazorRuntimeCompilation = true;
options.UseCms();
options.UseManager();
options.UseFileStorage(naming: Piranha.Local.FileStorageNaming.UniqueFolderNames);
options.UseImageSharp();
options.UseTinyMCE();
options.UseMemoryCache();
options.UseReservationModule();
var connectionString = builder.Configuration.GetConnectionString("piranha");
options.UseEF<SQLServerDb>(db => db.UseSqlServer(connectionString));
options.UseIdentityWithSeed<IdentitySQLServerDb>(db => db.UseSqlServer(connectionString));
/**
* Here you can configure the different permissions
* that you want to use for securing content in the
* application.
options.UseSecurity(o =>
{
o.UsePermission("WebUser", "Web User");
});
*/
/**
* Here you can specify the login url for the front end
* application. This does not affect the login url of
* the manager interface.
options.LoginUrl = "login";
*/
});
var app = builder.Build();
if (app.Environment.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UsePiranha(options =>
{
// Initialize Piranha
App.Init(options.Api);
// Build content types
new ContentTypeBuilder(options.Api)
.AddAssembly(typeof(Program).Assembly)
.Build()
.DeleteOrphans();
// Configure Tiny MCE
EditorConfig.FromFile("editorconfig.json");
options.UseManager();
options.UseTinyMCE();
options.UseIdentity();
});
app.Run();
line 28 to be exact. I´m able to see module in the manager under Modules tab. But there is this inside Module´s Init() function:
// Add manager menu items
Menu.Items.Add(new MenuItem
{
InternalId = "ReservationModule",
Name = "ReservationModule",
Css = "fas fa-box"
});
Menu.Items["ReservationModule"].Items.Add(new MenuItem
{
InternalId = "ReservationModuleStart",
Name = "Module Start",
Route = "~/manager/reservationmodule",
Policy = Permissions.ReservationModule,
Css = "fas fa-box"
});
But there are no new Menu items in the manager.
I´ll be more than happy to provide any more info. Thanks in advance for any help. :)