Is there a way to specify the innermost components for a react-admin Field (For instance for the PictureField to override the 'img' tag with another MyImgComponent)?
Or do I have to create a whole new MyPictureField duplicating almost all of the code?
In the specific problem with the 'img' tag I would like to replace it with an Img component that handles authentication so that only images accesible by the logged in user can be shown in the PictureField.
Related
I have a title navbar which shows up on every page(TheNavbar Component). However, I would like to change the title based on the page. For example. I have a folder called projects and inside other one called _id and a bunch of pages that refers to this id. I would like to show the project name in all pages inside of this folder _id and persists the date in case of a refresh. Should I call my API and take the info inside of the TheNavBar component, every refresh and create a computed property?
Yes it is very possible to have a dynamic title
you can do it through computed properties and make an api call in each page change to retrieve the title
computed:{
title(){
return this.$store.getters['getTitle']
}
}
I'm trying to build a simple web app with VueJS. Until now, I've been able to follow the documentation.
My Problem
I want to implement a generic page template that fetches the page metadata from my database.
However, pages are at the top-level of the navigation (/), so I can't use Vue route parameters to dynamically fetch the content from my database, because some of the pages have their own templates.
What I've Considered...
I've considered doing the following to get around the problem:
Implementing top-level parameter like this...
{ path: '/:slug', component: User }
..but this doesn't work for some reason.
Using a slot in the page component for the custom content, and just creating a new component for every page, but I want to stay DRY.
...but I don't want to have to create a new component for every page.
My Question
How do you implement top-level paging with a database backend in VueJS? Am I missing something simple here?
Does anyone know how to expand this theme ( https://github.com/gilbitron/wp-rest-theme ) in order to theme specific pages? For example, I would like to create a page called "Menu" which has a unique navigation to click through to child pages Breakfast, Lunch, Dinner, etc without reload. I'm used to creating individual .php files to theme specific pages to my liking via page-{slug}.php - Is there an equivalent workflow using vue.js and wp rest api?
Instead of using page-menu.php to customize the /menu page, I would imagine I'd need to create something like a menu-page.vue file and add a custom method to specifically call that page in order to template it.
I can't find any examples of this process. Any help would be greatly appreciated.
What I did was add a field using Advanced Custom Fields that determined which template the page should use. I wrapped the display in a component called PageContent that looks like this:
<div :is="page.template"
:page="page"
v-if="!$loadingRouteData"
transition="fade"
transition-mode="out-in">
</div>
router:
'/:slug': {
component: PageContent,
name: 'Page'
}
So when someone navigates to that route, I fetch the page based on the slug param. The page variable then has a template attribute through ACF, which determines the component to display and defaults to a generic page:
if(pages[0].acf.template){
return pages[0].acf.template;
}
return 'page'
You need the WP JSON API plugin as well as the ACF plugin that adds ACF data to the json
My site uses this setup, happy to share more code if you have more questions.
I am creating a dnn module. The content depends on the param in the url.
I want to be able to edit this content in the 'edit content' mode. However when i go to edit content the param in the url is no longer accessible because it is the parent document. How do i go about passing this value from the view.ascx to the edit.ascx?
Try storing the param in cookies or localstorage. Then you should be able to access it. Of course the user will be able to modify it but you can do a check that the user has not modified it by storing a server side encryption or somthing like that.
A workaround is to have a field where the user enters this parameter. But i know this isn't a very good solution. I am guessing that you will have to override the dotnetnuke core to do this (yes i know it sucks).
I hope I am understanding the question properly.
To pass parameters from your View to Edit controls, you should first make sure they are registered properly in the module definition. You default View should have an empty controlkey and your Edit should be registered with a control key, for example "addedit".
When creating a link between your view control and edit control, use the EditUrl() method of PortalModuleBase. When passing a parameter, for example an id of the item you want to load into your edit control, you can pass them as arguments in the EditUr method.
Example (in my view.ascx.cs):
lnkEdit.NavigateUrl = EditUrl("id", "16", "addedit");
This will assign a module view link to the edit.ascx (assuming the controlkey in the definition is addedit) passing in a url parameter "id" with value 16.
See my DNN Module Views tutorial for a complete lesson on how to do DNN module views and navigation.
http://www.dnnhero.com/Premium/Tutorial/tabid/259/ArticleID/204/Introduction-and-Module-Definition-basics-in-DNN-Part-1-6.aspx
I'm converting my site from using jQueryUI to jQuery Mobile, and I'm having some trouble.
I have a page that lets users add new timesheet entries. They click the "Add" button and it retrieves a Partial View from the server right onto the page.
The problem is that jQuery Mobile is not applying to any of the elements in the Partial View.
How can I force jQuery Mobile to process my elements after they've been inserted into the page?
The short answer is that you can just trigger the create method on the parent element of where you inserting your partial view.
For example $('#container').trigger( "create" );
Alternatively most widgets can be manually initialized by calling them on the element, for example for a listview: $('#myListview').listview(). This can be useful if you have only a few elements that need to be enhaced and you don't want to traverse all the child elements of the container. You should also know that for many widgets there is also a refresh method which you can call if you add elements to it after it has already been initialized for example $('#myListview').listview('refresh).
Also have a look at the following Q & A from the JQM docs which deals with this issue and for an explanation as to why it is necessary to call these methods.
Question: Content injected into a page is not enhanced.
Answer:
jQuery Mobile has no way to know when you have injected content into a
page. To let jQuery Mobile know you have injected content that must be
enhanced, you need to either make sure the plugins are called to
enhance the new elements or trigger("create") on the parent container
so you don't have to call each plugin manually.