Any JavaScript can be injected and executed in the browser after the page has been rendered. Just remember to wait until Vue has finished rendering before executing additional JavaScript on the DOM. For example, the drag n drop feature for the blocks are just a js plugin that’s initialized from Vue
Do you have an example for this? In this particular case we would need to add React Awesome Query Builder + dependencies. And how would you go about persisting the query builder output to the CMS?
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?
1 reply
@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
- use a blank c# object for storing the query
- Create a custom class with the relevant properties etc
- Use a JObject
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
1 reply
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;
