Frame

To close a sub-page opened by the frame, call the parent page's fApi.closeModel method

Online Preview

Rules

Basic Example

const rule = {
    type:"frame",
    title:"Material",
    field:"fodder",
    value:["/uploads/20131030/30-075657_191.jpg?1"],
    props:{
        type:"image",
        src:"iframe.html",
        maxLength:2,


},
    validate:[
        {required:true, type: 'array', min: 2, message: 'Select 2 images', trigger: 'change'}
    ],
}

Props Configuration Examples

Image Selection

const rule = {
    type:"frame",
    title:"Product Images",
    field:"images",
    value:[],
    props:{
        type:"image",
        src:"/image-selector.html",
        maxLength: 9,
        width: "800px",
        height: "600px",
        modalTitle: "Select Image",
    },
}

File Selection

const rule = {
    type:"frame",
    title:"Attachment Upload",
    field:"files",
    value:[],
    props:{
        type:"file",
        src:"/file-selector.html",
        maxLength: 5,
        width: "900px",
        height: "500px",
    },
}

Events Examples

Listen to Selection Changes

const rule = {
    type:"frame",
    title:"Product Images",
    field:"images",
    value:[],
    props:{
        type:"image",
        src:"/image-selector.html",
        maxLength: 9,
        onChange: (value) => {
            console.log('Selection value changed:', value);
        },
        onOpen: () => {
            console.log('Open popup');
        },
        onOk: (value) => {
            console.log('Clicked OK:', value);
        },
    },
}

value: String | Number | Array

Props

Property	Description	Type	Default
type	Frame display type, has input(string), file(file), image(image)	String	input
src	Address of frame page	String	-
helper	Enable helper methods in frame page	Boolean	false
disabled	Disable component	Boolean	false
icon	Icon for button to open popup	String	-
srcKey	When value is Object[], need to define srcKey	String	-
width	Popup width	String	-
height	Popup height	String	-
okBtnText	Popup OK button text	String	'OK'
closeBtnText	Popup close button text	String	'Close'
modalTitle	Image preview popup title text	String	'Preview'
handleIcon	Icon for action button, set to false will not display, set to true for default preview icon, default is false when type is file, default is true when type is image	String | Boolean	-
title	Popup title	String	-
modal	Configure popup props	Object	-
allowRemove	Whether can remove, set to false will not show remove button, effective when type equals image or file	Boolean	true
onChange	Triggered when value changes	Function	-
onOpen	Callback when opening popup	Function	-
onOk	Callback when clicking OK, return false will not close popup	Function	-
onHandle	Click action button event, default is image preview	Function	-
onBeforeRemove	Event before clicking remove button to remove, return false will not remove	Function	-
onRemove	Click remove button event	Function	-
onCancel	Triggered when popup closes, return false will not close popup	Function	-

helper

When helper methods are enabled, the frame page adds a global form_create_helper variable for component operations

• close

• Parameters: - field Component's field

• Description: Closes the current frame component's popup

• Example:

  form_create_helper.close(field)

• set

• Parameters: - field Component's field - value Component's value

• Description: Modifies the current frame component's value

• Example:

  form_create_helper.set(field,[1,2,3])

• get

• Parameters: - field Component's field

• Description: Gets the current frame component's value

• Example:

  const value = form_create_helper.get(field)