1

I was migrating a 7.1 DXP portal to 7.2 DXP but I can not bring my custom form field to work. I used the dynamic-data-mapping-form-field-type module as a blueprint. My new field is available inside of the form builder - but when using it, nothing gets rendered. I don't have an errors on build, deploy or in JS console. Unfortunately, there is no blade example for 7.2 yet so that I could not start with a simple example. My question is: how to hook in the field Soy template to render?

Andre Albert
  • 1,386
  • 8
  • 17

2 Answers2

3

It is being implemented in https://issues.liferay.com/browse/LPS-98417 and it is true there is no blade example.

Meanwhile you can download following example code:

jorgediaz-lr
  • 942
  • 6
  • 13
  • Thank you so much, the referenced GitHub form-field works and is a good starting point. – Andre Albert Mar 17 '20 at 15:03
  • @AndreAlbert@jorgetdiaz-lr any patch available for this? i have similar requirement to create new form field type. thanks – Dipti Ranparia Nov 19 '20 at 06:23
  • 1
    @Dipti - i dont know if there is a patch. I used the referenced example repo and could add a Field out of the box – Andre Albert Nov 22 '20 at 12:50
  • @AndreAlbert thanks for the answer will try the same repo to implement form field i need. – Dipti Ranparia Nov 24 '20 at 06:39
  • @AndreAlbert i made necessary changes int the repo you mentioned to fulfil my requirement. All good except required attribute, if i mark field as a required whether i enter the input or not i am not able to submit the form and no error in console any hint? Thanks in advance. – Dipti Ranparia Nov 26 '20 at 12:10
  • @jorgediaz-lr is there a fix for this alredy available for Maven? I can't choose version 7.2 in the archetype...thanks beforehand – evaldeslacasa Jan 12 '21 at 18:24
  • People who tried the successful implementation of the custom field in 7.2 can they please provide the hints on FieldRender and other required classes implementation.. Im a new bee here .. if any source code provided will be much helpful. Did so many trials with above slider sample but couldnt move forward except showing the new customfield in the list of fields but rendering after putting on form doesn't work for me @Dipti Ranparia – Muzammil Shareef Mar 17 '21 at 13:14
  • @MuzammilShareef what error you are getting? – Dipti Ranparia Mar 26 '21 at 12:18
1

In case anyone is here for Liferay 7.3. Liferay 7.3 moved from soy templates to pure react components. You could use Liferay's module as a blueprint again.

import { FieldBase } from 'dynamic-data-mapping-form-fieldtype/FieldBase/ReactFieldBase.es'

import React, { useState, useEffect, useRef } from 'react';

const Text = ({ readOnly,
    id,
    name,
    onBlur,
    onChange,
    onFocus,
    placeholder,
    value: initialValue }) => {

    const [value, setValue] = useState(initialValue);

    return (
        <>
            <input type="text" />
        </>
    );
};

const Main = (props) => {
    return (
        <FieldBase  {...props}>
            <Text {...props} />
        </FieldBase>
    );
}

export default Main;

In this case we are importing FieldBase component that is the Liferay field wrapper that will take care of adding any default Liferay behavior (validation, names, placeholder, tooltip etc...). We did the same when we used Soy templates.

You can create the module from form-field blade template. Then remove the soy template files along with the following line in package.json "build-soy": "metalsoy --externalMsgFormat \"Liferay.Language.get(‘\\$2’)\" --soyDeps \"./node_modules/clay-*/src/**/*.soy\" \"./node_modules/com.liferay.dynamic.data.mapping.form.field.type/META-INF/resources/+(FieldBase|components)/**/*.soy\"" since we don't have any soy template to generate JS from.

What you will end up is just an es.js file.

Edit: If you are using blade to generate the template, you can use this option to generate a react based component: --js-framework react

AzLimbiate
  • 21
  • 4