ng-admin fails to identify custom field view

I've been exploring ng-admin.
After referring to the documentation, I decided to create a custom field.
However, even though ng-admin recognizes the FooFieldType, it is not rendering the FoofieldView and instead using the original FieldView!

Configuration Module:

angular.module('admin', ['ng-admin']);

import FooField from './FooFieldType';

angular.module('admin')
  .config(['NgAdminConfigurationProvider', function (nga) {
    nga.registerFieldType('foo', FooField);
  }])
  .config(['FieldViewConfigurationProvider', function (fvp) {
    fvp.registerFieldView('foo', require('./FooFieldView'));
  }])
  ;
angular.module('admin').config(['NgAdminConfigurationProvider', function (nga) {
   var bar = nga.entity('bar');
   bar.creationView().fields([nga.field('foo','foo')]);
});

FooField.js:

import Field from 'admin-config/lib/Field/Field';
class FooField extends Field {
  constructor(name) {
    super(name);
  }
}
export default FooField;

FooFieldView.js:

export default {
  // displayed in listView and showView
  getReadWidget   : () => '<ma-number-column field="::field" value="::entry.values[field.name()]"></ma-number-column>',
  // displayed in listView and showView when isDetailLink is true
  getLinkWidget   : () => '<a ng-click="gotoDetail()">' + module.exports.getReadWidget() + '</a>',
  // displayed in the filter form in the listView
  getFilterWidget : () => '<ma-input-field type="number" field="::field" value="values[field.name()]"></ma-input-field>',
  // displayed in editionView and creationView
  getWriteWidget  : () => '<h1>testFoo</h1><ma-input-field type="number" field="::field" value="entry.values[field.name()]"></ma-input-field>'
};

Answer №1

It appears that there is a crucial detail missing from the documentation regarding the 'this._type' setting in the Field class. To resolve this, you must make changes to FooField.js by adding the following line:

....
class FooField extends Field {
  constructor(name) {
    super(name);
    //THIS IS THE IMPORTANT PART:
    this._type = 'foo';
    //DOC DOESN'T SPEAK ABOUT
  }
}
....

By defining _type in the FooField class, the appropriate view based on type will be rendered. Without this setting, only the default String view will be displayed, resulting in functionality issues.

The documentation definitely needs an update :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to determine the expense upon button activation - data remains stagnant

My coding project involves a basic ordering system where users can input an integer, click on an update button, and see the total cost displayed below. Despite my efforts, I've encountered issues with two different methods: Using plain JavaScript for ...

Issue encountered during rendering: The function used is not a filter

Everything works fine with the search filter and pagination on the initial load. However, upon clicking to go to the next page, an error occurs stating **'Error in render: "TypeError: this.tickets.filter is not a function"'**. This issue can b ...

The next and previous buttons on the JQuery UI datepicker are related to only one ancestor. When using $(e.target).parents(), it will only return a

Unfortunately, my reputation isn't high enough to post my own answer just yet. However, I wanted to share it before wasting more people's time: I finally figured out why I was not getting all the expected ancestors: The JQuery datepicker actuall ...

Using JQuery's $.ajax() method to send a post request and pass data to invoke a specific method in

I'm currently in the process of learning JQuery and encountering some challenges with utilizing the $.ajax() function. My goal is to send data to a controller for processing. During my debugging of the JQuery, it seems that the ajax call isn't b ...

How can we stop the brief display of a hidden div from occurring?

I have two divs on my webpage - one to display if JavaScript is disabled, and another if JavaScript is enabled. The issue I am facing is that even when JavaScript is not disabled, the div containing the message stating that JavaScript is disabled briefly ...

Adjust the color of the active link on the page using Angular and CSS

I have a project that I need to modify by adding a sub menu that appears on every page but is only coded once. My goal is to highlight the link for the current page, all within one HTML snippet. Although the list renders correctly, I'm struggling to g ...

Challenges with Webpack sourcemaps

As I delve into learning nodejs and react, my current challenge lies in building bundle.js and debugging it within the browser. However, despite creating the bundle.map file, I am faced with errors as the webpack tab fails to appear in the browser. DevTool ...

ways to change date format in a React.js application using JavaScript

<b>Choose Date and Time</b><br/> <DateTimeField onChange={this.clockevent} format={"x"}/> clockevent=(newDate)=>{ var dateVal ="/Date("+newDate+")/"; var date = new Date(parseFloat(dateVal.substr(6))); console.log( ...

When attempting to remove an object from an array in Vue.js, an error may occur stating that the property of the

In my project, I am working with 3 files: App, BlogList, BlogItem. The goal is to enable users to delete a post if they choose to. However, when using splice method, I encountered the following error: The property or method "removePost" is not defined o ...

Setting a default value in ng-options can be accomplished by using the ng-init

One way to set a dropdown list with a default value in AngularJS is by using the following code: <select name="repeatSelect" id="repeatSelect" ng-model="repeatSelect" ng-init="repeatSelect = data[0].id"> <option ng-repeat="option in data" val ...

Having trouble with Semantic UI Modal onShow / onVisible functionality?

Seeking assistance with resizing an embedded google map in a Semantic UI modal after it is shown. After numerous attempts, I have narrowed down the issue to receiving callbacks when the modal becomes visible. Unfortunately, the onShow or onVisible functio ...

Is there a way to extract the values from a range slider individually and then display them as the minimum and maximum values on the screen?

Currently, I am facing an issue with a range slider where the value I am retrieving is concatenated. For example, when printed, it appears as 2080, with 20 and 80 being separate values visually combined on screen. My goal is to extract the minimum and maxi ...

Implementing a switch feature with enable/disable functionality in a material table using table row data

Is there a way to incorporate an additional action in the Material table and have it included in the React material table along with the element? Furthermore, how can I obtain row data on onChange event while currently rendering it in the state? I would a ...

Is it possible to bundle Live using Angular 2 and SystemJS-builder, even when attempting to load modules from node_modules?

I'm having a bit of trouble transitioning my angular 2 application into production. It seems to be searching for scripts within the node_modules directory. I'm fairly new to angular 2 and despite spending half a day looking for a solution, I can ...

The Art of Capturing Sound: Unleashing

Currently, I am attempting to capture video via html5 .getUserMedia and play it back without needing to upload it to a server. Despite following numerous tutorials, I have only been successful on Chrome by utilizing canvas to draw the webp image and then c ...

"Implementing x2js in your project on-the-fly with the help

Hey there, does anyone have the link for x2js that they could share with me? I'm interested in loading this JavaScript file dynamically. I tried using the code below but it didn't work: EffectaJQ.ajax({ async: false, url: "https ...

In TypeScript, how are angle brackets like methodName<string>() utilized?

Could someone please assist me in understanding why we use angular brackets <> in typescript? For example, I have provided some code below and would appreciate an explanation. export class HomePage { constructor(public navCtrl: NavController) ...

Slide the next section over the current section using full-page JavaScript

I'm currently developing a website utilizing the FullPage.JS script found at this link . My goal is to have the next section slide over the previous one, similar to what is demonstrated in this example. I've attempted setting the position to fix ...

Exploring Three.js raycasting in a non-full screen scenario

I've encountered some challenges with raycasting in three.js recently. The div element I'm using is not fullscreen, which I believe is causing issues with the raycast positioning that I'm struggling to resolve. let mouseVector = new THR ...

Using jsPlumb to Access an Element After a "Mouseup" Event has Completed

$(document).on('mouseup', '.agent-wrapper', function(info){ console.log(info); // Everything is working fine console.log(this); }); .agent-wrapper represents an element-wrapper for all jsPlumb objects. $(document).on(' ...