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.
The Engine is used to manage automation rules feature within neeto applications.
-
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
Install the latest neetoRules nano
package using the below command:
yarn add @bigbinary/neeto-rules-frontend
Check the Frontend package development guide for step-by-step instructions to develop the frontend package.
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
-
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.
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>
NeetoRulesForm provides field components to create the automation rules form.
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} />;
-
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.
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} />;
-
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.
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} />;
-
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.
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} />;
-
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.
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} />;
-
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}]
.
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"
/>;
-
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.
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>;
-
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.
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} />;
-
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.
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,
},
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>"
}
]
}
The RulePreview
component is used to preview the automation rule.
-
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:
Consult the building and releasing packages guide for details on how to publish.