@bigbinary/neeto-rules-frontend v0.6.3
neeto-rules-nano
The neeto-rules-nano
facilitates the management of automation rules within neeto applications. The nano exports @bigbinary/neeto-rules-frontend
NPM package and neeto-rules-engine
Rails engine.
Contents
Development with Host Application
Engine
The Engine is used to manage automation rules feature within neeto applications.
Installation
Add this line to your application's Gemfile:
source "NEETO_GEM_SERVER_URL" do # ..existing gems gem "neeto-rules-engine" end
And then execute:
bundle install
Add this line to your application's
config/routes.rb
file:mount NeetoRulesEngine::Engine => "/neeto_rules"
Run the following command to copy the migrations from the engine to the host application:
rails g neeto_rules_engine:install
Add the migrations to the database:
bundle exec rails db:migrate
Frontend package
Installation
Install the latest neetoRules nano
package using the below command:
yarn add @bigbinary/neeto-rules-frontend
Instructions for development
Check the Frontend package development guide for step-by-step instructions to develop the frontend package.
Components
1. NeetoRulesForm
The NeetoRulesForm
component is used to create and edit automation rules.
NeetoRulesForm
accepts the following field types which is specified in the initialProps
(reference):
- text
- long-text
- dropdown
- multi-select
- radio
- events
- condition
- actions
Props
data
: The initial props for the form.children
: The form fields.className
: To provide external classes to form.handleSubmit
: The function to handle the form submission.handleClose
: The function to handle the form close.
Usage
import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";
const { InputField, TextareaField, SelectField, Events, Card, Conditions, Actions } = NeetoRulesForm;
<NeetoRulesForm data={initialProps}>
{({ formattedValues, values, ...formikBag }) => (
<>
<InputField name="name" data={initialProps} />
<TextareaField name="description" data={initialProps} />
<SelectField name="projectId" data={initialProps} />
<Events name="events" data={initialProps} performerName="performer" />
<Card title="Conditions">
<Conditions name="conditions" data={initialProps} />
</Card>
<Actions name="actions" data={initialProps} />
</>
)}
</NeetoRulesForm>
References
2. Field components for NeetoRulesForm
NeetoRulesForm provides field components to create the automation rules form.
References
2.1 InputField
import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";
const { InputField } = NeetoRulesForm;
const initialProps = {
...otherProps,
firstName: {
label: "First Name",
type: "text",
value: "", // Default value.
componentProps: {
placeholder: "Enter name",
},
},
};
<InputField name="firstName" data={initialProps} />;
props
name
: Name of the field. The name should be same as that in theinitialProps
.data
: The sameinitialProps
that is passed to data prop inNeetoRulesForm
.label
: Label for the field.
2.2 TextareaField
import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";
const { TextareaField } = NeetoRulesForm;
const initialProps = {
...otherProps,
description: {
label: "Description",
type: "long-text",
value: "", // Default value.
},
};
<TextareaField name="description" data={initialProps} />;
props
name
: Name of the field. The name should be same as that in theinitialProps
.data
: The sameinitialProps
that is passed asdata
prop inNeetoRulesForm
.label
: Label for the field.
2.3 SelectField
import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";
const { SelectField } = NeetoRulesForm;
const initialProps = {
...otherProps,
user: {
label: "Project",
type: "dropdown",
options: [{ label: "Oliver", value: "oliver" }],
value: "oliver", // Default selected option will be Oliver
},
};
<SelectField name="user" data={initialProps} />;
props
name
: Name of the field. The name should be same as that in theinitialProps
.data
: The sameinitialProps
that is passed to data prop inNeetoRulesForm
.label
: Label for the field.options
: Options for the dropdown. The options should be an array of objects withlabel
andvalue
keys.[{label, value}]
.onChange
: Callback function that is called when the value of the dropdown changes.(value, setValue) => void
setValue
is to set the new value.
2.4 MultiSelectField
import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";
const { MultiSelectField } = NeetoRulesForm;
const initialProps = {
...otherProps,
users: {
label: "Projects",
type: "multi-select",
options: [
{ label: "Oliver", value: "oliver" },
{ label: "John", value: "john" },
],
value: ["oliver"], // Default selected option will be Oliver
},
};
<MultiSelectField name="users" data={initialProps} />;
props
name
: Name of the field. The name should be same as that in theinitialProps
.data
: The sameinitialProps
that is passed to data prop inNeetoRulesForm
.label
: Label for the field.options
: Options for the dropdown. The options should be an array of objects withlabel
andvalue
keys.[{label, value}]
.onChange
: Callback function that is called when the value of the dropdown changes.(value, setValue) => void
setValue
is to set the new value.
2.5 RadioField
import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";
const { RadioField } = NeetoRulesForm;
const initialProps = {
...otherProps,
performer: {
label: "Performer",
type: "radio",
value: "any", // Default selected value will be "any"
options: [
{ label: "Admin", value: "admin" },
{ label: "Any", value: "any" },
],
},
};
<RadioField name="performer" data={initialProps} />;
props
name
: Name of the field. The name should be same as that in theinitialProps
.data
: The sameinitialProps
that is passed to data prop inNeetoRulesForm
.label
: Label for the field.options
: Options for the radio buttons. The options should be an array of objects withlabel
andvalue
keys.[{label, value}]
.
2.6 EventConditions
import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";
const { EventConditions } = NeetoRulesForm;
const EVENT_OPTIONS = [
{ label: "Ticket is created", value: "created" },
{ label: "Ticket is updated", value: "updated" },
...otherOptions,
];
const PERFORMER_OPTIONS = [
{ label: "Any", value: "any" },
{ label: "Member", value: "agent" },
...otherOptions,
];
const CONDITION_OPTIONS = [
{
value: "status",
label: "Status",
type: "multi-select",
allowMatching: ["any_of", "none_of"],
dropdownOptions: [
{ label: "Open", value: "open" },
{ label: "Closed", value: "closed" },
{ label: "On hold", value: "on_hold" },
],
},
{
value: "name",
label: "Name",
allowMatching: ["is", "is_not"],
type: "text",
},
...otherOptions,
];
const DEFAULT_CONDITION_VALUE = [
{
id: "1",
field: "status",
verb: "any_of",
metadata: { values: ["open", "closed"] },
joinType: "and_operator",
},
{
id: "2",
field: "name",
verb: "is",
metadata: { value: "Test" },
joinType: "and_operator",
},
...otherConditionValues,
];
const initialProps = {
...otherProps,
events: {
label: "Events",
type: "events",
value: [{ name: EVENT_OPTIONS[0].value }],
eventOptions: EVENT_OPTIONS,
defaultData: { name: "time_based", performer: "system" },
},
performer: {
label: "Performer",
type: "dropdown",
value: "any",
options: PERFORMER_OPTIONS,
},
conditions: {
label: "Conditions",
type: "condition",
conditionOptions: CONDITION_OPTIONS,
value: DEFAULT_CONDITION_VALUE,
},
};
<EventConditions
name="events"
data={initialProps}
performerName="performer"
conditionsName="conditions"
/>;
props
name
: Name of the field. The name should be same as that in theinitialProps
.data
: The sameinitialProps
that is passed to data prop in NeetoRulesForm.label
: Label for the field.performerName
: Name of the performer field. TheperformerName
should be same as that in theinitialProps
.conditionsName
: Name of the conditions field. TheconditionsName
should be same as that in theinitialProps
.onSelectEvent
:(name, selectedOption) => void
. This method will trigger when we select an event option. The name is to refer the event in the formik context.
Refer to the EventCondition section for more information.
2.7 Conditions
import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";
const { Card, Conditions } = NeetoRulesForm;
const initialProps = {
...otherProps,
conditions: {
label: "Conditions",
type: "condition",
conditionOptions: [
{
value: "status",
label: "Status",
type: "dropdown", // Types : text, number, email, decimal, url, dropdown, multi-select, multi-select-create, date.
allowMatching: ["is", "is_not", "any_of", "none_of"],
dropdownOptions: [
{ label: "Open", value: "open" },
{ label: "Closed", value: "closed" },
],
additionalData: {
any_of: "multi-select",
none_of: "multi-select",
},
},
{
value: "name",
label: "Name",
type: "text",
allowMatching: ["is", "is_not"],
},
{
value: "tags",
label: "Tags",
type: "multi-select-create",
allowMatching: ["contains_any_of", "contains_none_of"],
},
],
value: [
{
id: "1",
field: "status",
verb: "is",
metadata: { value: "open" },
joinType: "and_operator",
},
{
id: "2",
field: "name",
verb: "is",
metadata: { value: "Test" },
joinType: "and_operator",
},
{
id: "3",
field: "tags",
verb: "contains_any_of",
metadata: { values: ["Test", "Open"] },
joinType: "and_operator",
},
],
},
};
<Card title="Conditions">
<Conditions name="conditions" data={initialProps} />
</Card>;
props
name
: Name of the field. The name should be same as that in theinitialProps
.data
: The sameinitialProps
that is passed to data prop inNeetoRulesForm
.label
: Label for the field.onSelectCondition
:(name, selectedOption) => void
. This method will trigger when we select a condition option. The name is to refer the condition in the formik context.selectedConditionOptions
:(selectedCondition)=> [{label, value}]
. To provide options for the selected condition if the type of selected condition isdropdown
,multi-select
, ormulti-select-create
.isCallback
: To specify if there is a preview callback function for the conditions. (Boolean).previewCallback
:(conditions) => void
. This method will trigger when we click on the preview button. The conditions are the selected conditions in the formik context.
2.8 Actions
import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";
const { Actions } = NeetoRulesForm;
const initialProps = {
...otherProps,
actions: {
label: "Actions",
type: "actions",
actionOptions: [
{
value: "add_tags",
label: "Add Tags",
type: "multiSelect", // Types : emailToIds, emailTo, email, dropdown, list, multiSelect, note, date, text, textarea, decimal, number, regex, longText, sms, smsToNumbers, smsTo, sendToApi
hideSeparator: true,
placeholder: "Select tags",
dropdownOptions: [
{ label: "Open", value: "open" },
{ label: "Close", value: "close" },
{ label: "Hold", value: "hold" },
],
},
{
value: "email_to",
label: "Email To",
type: "emailToIds",
separator: "as",
hideSubject: true, // Hide subject field if this prop is true
},
{
value: "send_sms",
label: "Send sms",
type: "longText",
},
],
value: [
{
id: "1",
name: "email_to", // Specify the value of the selected action.
metadata: { emails: ["a@a.com"], subject: "test", body: "test" },
},
{
id: "2",
name: "add_tags",
metadata: { values: ["close"] },
},
],
},
};
<Actions name="fieldName" data={initialProps} />;
props
name
: Name of the field. The name should be same as that in theinitialProps
.data
: The sameinitialProps
that is passed to data prop inNeetoRulesForm
.label
: Label for the field.onSelectAction
:(name, selectedOption) => void
. This method will trigger when we select an action option. The name is to refer the action in the formik context.selectedActionOptions
:(selectedAction)=> [{label, value}]
. To provide options for the selected action if the type of selected action isdropdown
ormulti-select
.
Refer to the Actions section for more information.
2.9 Custom action component
neetoRulesFrontend allows to pass custom action components from host application. Below is an example for customize task component which is being sent by neeto-crm in action options.
{
label: "Add task",
value: "add_task",
placeholder: "Task",
component: TaskComponent,
validation: TASK_VALIDATION,
},
2.10 Custom message templates
neetoRulesFrontend allows to pass predefined email, SMS and API templates from host application. This enables to use templates created using neeto-message-templates-nano. Below is an example for custom message template which is being sent by neeto-form in action options.
{
"label": "Email to responder",
"value": "email_to_responder",
"type": "emailTo",
"templates": [
{
"id": "caca1cc9-f9db-480a-a64f-6ea0c72d4b05",
"name": "Send emails to rejected candidates",
"subject": "Application Status - Screening Round Unsuccessful",
"body": "<p>Dear {{full-name}},</p><p>Thank you for your interest. Unfortunately, we regret to inform you that you did not pass the screener round.</p><p>Best regards, </p><p>Spinkart</p>"
}
]
}
3. RulePreview
The RulePreview
component is used to preview the automation rule.
Props
ruleDetails
: The rule details to be previewed.isLoading
: To specify if the preview is loading. (Boolean).isOpen
: To specify if the preview is open. (Boolean).onClose
: The callback function to call when the preview is closed.() => void
.
reference:
Instructions for Publishing
Consult the building and releasing packages guide for details on how to publish.
22 hours ago
12 days ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
10 months ago
7 months ago
9 months ago
10 months ago
6 months ago
6 months ago
7 months ago
9 months ago
7 months ago
9 months ago
6 months ago
7 months ago
11 months ago
8 months ago
9 months ago
8 months ago
8 months ago
7 months ago
8 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago