FormLowcode

Komponen ini digunakan untuk menampilkan form berdasarkan spesifikasi yang diberikan

Tipe Form yang tersedia

INPUT_TEXT
INPUT_NUMBER
INPUT_DATETIME-LOCAL
INPUT_TEXTAREA
INPUT_DATE
INPUT_RADIO
radio1
radio2
INPUT_CHECKBOX
option 1
option 2
INPUT_SWITCH
Ya
Tidak
INPUT_TABLE
INPUT_FOREIGN-SELECT
Select...
INPUT_SELECT
Select...
INPUT_IMAGE_UPLOAD
Klik untuk mengunggah, atau drag file
INPUT_FILE_UPLOAD
Klik untuk mengunggah, atau drag file

Base

ini contoh sederhana penggunaan TableLowcode

Create

Typescript

import { FormLowcode } from 'alurkerja-ui'
import { useForm } from 'react-hook-form'

export const FormLowcodePage = () => {
	const { formState, handleSubmit, control, setValue } = useForm()

	return(
		<FormLowcode
		  title="Create"
		  baseUrl="https://alurkerja-ui-bot.vercel.app"
		  specPath="/api/data"
		  formState={formState}
		  handleSubmit={handleSubmit}
		  control={control}
		  setValue={setValue}
		/>
	)
}

Props

customField()

custom field digunakan untuk mereplace field yang sudah dibuat oleh alurkerja (hanya field label tidak termasuk)

Create

Typescript

import { FormLowcode, CustomFieldProperties} from 'alurkerja-ui'
import { useForm } from 'react-hook-form'

export const FormLowcodePage = () => {
	const { formState, handleSubmit, control, setValue } = useForm()
	
	const customField = ({ field, defaultField }: CustomFieldProperties) => {
	  if (field.name === 'name') {
	    return <div>ini bisa buat custom klo form nya tidak standar</div>
	  }
	  return defaultField
	}

	return(
		<FormLowcode
		  title="Create"
		  baseUrl="https://alurkerja-ui-bot.vercel.app"
		  specPath="/api/data"
		  formState={formState}
		  handleSubmit={handleSubmit}
		  control={control}
		  setValue={setValue}
		  customField={customField}
		/>
	)
}

columnSpan() & columnNumber()

Create

Typescript

import { FormLowcode } from 'alurkerja-ui'
import { useForm } from 'react-hook-form'

export const FormLowcodePage = () => {
	const { formState, handleSubmit, control, setValue } = useForm()

	return(
		<FormLowcode
		  title="Create"
		  baseUrl="https://alurkerja-ui-bot.vercel.app"
		  specPath="/api/data"
		  formState={formState}
		  handleSubmit={handleSubmit}
		  control={control}
		  setValue={setValue}
		  columnNumber={2}
		  columnSpan={{ name: 2 }}
		/>
	)
}

readonly()

Readonly

Typescript

import { FormLowcode } from 'alurkerja-ui'
import { useForm } from 'react-hook-form'

export const FormLowcodePage = () => {
	const { formState, handleSubmit, control, setValue } = useForm()

	return(
		<FormLowcode
		  title="Create"
		  baseUrl="https://alurkerja-ui-bot.vercel.app"
		  specPath="/api/data"
		  formState={formState}
		  handleSubmit={handleSubmit}
		  control={control}
		  setValue={setValue}
		  readonly
		/>
	)
}

extraActionButton()

Extra Action Button

Typescript

import { FormLowcode, Button} from 'alurkerja-ui'
import { useForm } from 'react-hook-form'

export const FormLowcodePage = () => {
	const { formState, handleSubmit, control, setValue } = useForm()
	
	const extraActionButton = () => {
	  return <Button variant="outlined">Button Extra</Button>
	}

	return(
		<FormLowcode
		  title="Create"
		  baseUrl="https://alurkerja-ui-bot.vercel.app"
		  specPath="/api/data"
		  formState={formState}
		  handleSubmit={handleSubmit}
		  control={control}
		  setValue={setValue}
		/>
	)
}

disabled()

Disabled

Typescript

import { FormLowcode } from 'alurkerja-ui'
import { useForm } from 'react-hook-form'

export const FormLowcodePage = () => {
	const { formState, handleSubmit, control, setValue } = useForm()

	return(
		<FormLowcode
		  title="Create"
		  baseUrl="https://alurkerja-ui-bot.vercel.app"
		  specPath="/api/data"
		  formState={formState}
		  handleSubmit={handleSubmit}
		  control={control}
		  setValue={setValue}
		  disabled
		/>
	)
}

customCancelButton()

Custom Cancel Button

Typescript

import { FormLowcode, Button} from 'alurkerja-ui'
import { useForm } from 'react-hook-form'

export const FormLowcodePage = () => {
	const { formState, handleSubmit, control, setValue } = useForm()
	
	const customCancelButton = () => {
	  return <Button variant="filled">Custom Cancel</Button>
	}

	return(
		<FormLowcode
		  title="Create"
		  baseUrl="https://alurkerja-ui-bot.vercel.app"
		  specPath="/api/data"
		  formState={formState}
		  handleSubmit={handleSubmit}
		  control={control}
		  setValue={setValue}
		  customCancelButton={customCancelButton}
		/>
	)
}

customSubmitButton()

Custom Submit Button

Typescript

import { FormLowcode, Button} from 'alurkerja-ui'
import { useForm } from 'react-hook-form'

export const FormLowcodePage = () => {
	const { formState, handleSubmit, control, setValue } = useForm()
	
	const customSubmitButton = () => {
	  return <Button variant="outlined">Custom Submit</Button>
	}

	return(
		<FormLowcode
		  title="Create"
		  baseUrl="https://alurkerja-ui-bot.vercel.app"
		  specPath="/api/data"
		  formState={formState}
		  handleSubmit={handleSubmit}
		  control={control}
		  setValue={setValue}
		  customSubmitButton={customSubmitButton}
		/>
	)
}

Inline()

Inline

Typescript

import { FormLowcode } from 'alurkerja-ui'
import { useForm } from 'react-hook-form'

export const FormLowcodePage = () => {
	const { formState, handleSubmit, control, setValue } = useForm()

	return(
		<FormLowcode
		  title="Create"
		  baseUrl="https://alurkerja-ui-bot.vercel.app"
		  specPath="/api/data"
		  formState={formState}
		  handleSubmit={handleSubmit}
		  control={control}
		  setValue={setValue}
		  inline
		/>
	)
}

onSubmit()

OnSubmit

Typescript

import { FormLowcode } from 'alurkerja-ui'
import { useForm, FieldValues } from 'react-hook-form'

export const FormLowcodePage = () => {
	const { formState, handleSubmit, control, setValue } = useForm()
	
	const onSubmit = (data: FieldValues) => {
	  return alert(JSON.stringify('cancel clicked'))
	}

	return(
		<FormLowcode
		  title="Create"
		  baseUrl="https://alurkerja-ui-bot.vercel.app"
		  specPath="/api/data"
		  formState={formState}
		  handleSubmit={handleSubmit}
		  control={control}
		  setValue={setValue}
		  onSubmit={onSubmit}
		/>
	)
}

onCancel()

OnCancel

Typescript

import { FormLowcode } from 'alurkerja-ui'
import { useForm } from 'react-hook-form'

export const FormLowcodePage = () => {
	const { formState, handleSubmit, control, setValue } = useForm()
	
	const onCancel = () => {
	  return alert(JSON.stringify('cancel clicked'))
	}

	return(
		<FormLowcode
		  title="Create"
		  baseUrl="https://alurkerja-ui-bot.vercel.app"
		  specPath="/api/data"
		  formState={formState}
		  handleSubmit={handleSubmit}
		  control={control}
		  setValue={setValue}
		  onCancel={onCancel}
		/>
	)
}

customHeader()

Custom Header

Typescript

import { FormLowcode } from 'alurkerja-ui'
import { useForm } from 'react-hook-form'

export const FormLowcodePage = () => {
	const { formState, handleSubmit, control, setValue } = useForm()
	
	const customHeader  = () => {
	  return <>Custom Header</>
	}

	return(
		<FormLowcode
		  title="Create"
		  baseUrl="https://alurkerja-ui-bot.vercel.app"
		  specPath="/api/data"
		  formState={formState}
		  handleSubmit={handleSubmit}
		  control={control}
		  setValue={setValue}
		  customHeader={customHeader}
		/>
	)
}

customFooter()

Create

Typescript

import { FormLowcode } from 'alurkerja-ui'
import { useForm } from 'react-hook-form'

export const FormLowcodePage = () => {
	const { formState, handleSubmit, control, setValue } = useForm()
	
	const customFooter = ({}: CustomFooterProperties) => {
	 return <>Custom</>
	}

	return(
		<FormLowcode
		  title="Create"
		  baseUrl="https://alurkerja-ui-bot.vercel.app"
		  specPath="/api/data"
		  formState={formState}
		  handleSubmit={handleSubmit}
		  control={control}
		  setValue={setValue}
		  customFooter={customFooter}
		/>
	)
}