shesha-io/shesha-framework

An open-source Low-Code development framework for .NET developers. Create .NET based business applications with 80% less code.

What is Shesha?

Shesha is an open-source Low-Code development framework specifically for .NET developers. You can build anything from simple CRUD apps, admin panels to complex business applications super quickly.

Shesha builds on top of other excellent frameworks and libraries (most notably ASP.NET Core, Abp.io, React, NextJs), layers on Low-Code capabilities (think drag & drop form builder and app themer), and incorporates standard admin functionality (e.g. User and security management) to drastically reduce the time and effort required to build applications.

In fact, in our experience, you will likely need >80% less code for most typical business applications.

👾 Embark on an adventure and explore the boundless possibilities of Shesha at our tutorial site! It's not just a playground; it's a vibrant universe where you can interact with the framework and witness its magic unfold.

More info from the Shesha website.

Features

Shesha comes with a range of features that massively reduce the effort required to create business applications:

• Form Builder allows users to create application pages and by simply 'dragging and dropping' components onto a page designer. With over 40 components that come as standard, you will be able to create powerful and professional-looking applications without writing a line of front-end code. If the standard components aren't sufficient, simply create your own in React or create entirely custom pages.
• Dynamic CRUD APIs get 'auto-magically' generated from your domain entities without the need for repetitive boilerplate code. APIs can be secured simply through configuration.
• App Themer allows you to match your branding needs with zero effort.
• Administration Panel provides the most common admin functionalities required by almost any business application 'out-of-the-box', including:
  • Security:
    • User Management
    • Roles and permissions management
    • API Configuration
    • Data change audits
    • Logon Audits
  • Settings management
  • Notification templates and audits
  • Scheduled and Background Jobs management
  • Reference/Lookup lists management

Get Started • YouTube • Demo Site

Build Apps in 4 Steps

1. Implement your Domain

Shesha takes a Domain-driven approach to application development, the starting point is therefore to implement your domain. This is done by implementing Entity classes as you would do for any business application. You can extend standard entities that come as part of the base Shesha model (e.g. Person, Organisation, Site, etc...) or by creating your own.

2. Expose your APIs

All it takes to expose your domain and data through dynamically generated CRUD APIs is the checking of a box and specifying the authorization rules.

You will immediately get full CRUD support as well as GraphQL endpoints for flexible and efficient data retrieval.

Where the dynamically generated APIs are insufficient, you still have the full power of Visual Studio and ASP.NET Core to create custom APIs the way you are used to.

3. Configure your UI

Once you have exposed your domain and APIs, you can build your UI through our drag-and-drop form builder. There are over 40 different components including tables, lists, forms, sub-forms, modals, and many more allowing you to build sophisticated and scalable enterprise applications without a line of front-end code.

Where the configuration-only approach is too limiting, you can add Javascript snippets to implement more advanced behavior or build custom components or entire pages using React.

4. Deploy your app

Simply deploy your application as you would any other ASP.NET Core website with Sql Server. Deploy on your favorite cloud or on-premise.

Getting Started

The easiest way to get started is by downloading a starter template and by following our tutorial videos that will take you through the full process of building your first Shesha application.

Support and Community

Issues are inevitable. When you have one, our entire team and our active developer community are around to help.

💬 Talk to us on Discord
📄 Find a solution in our Documentation
⚠️ Open an issue right here on GitHub
💡 Use our learning resources: Videos
👾 Play around with live configurations on our tutorial site

How to Contribute

We ❤️ our contributors. We're committed to fostering an open, welcoming, and safe environment in the community.

📕 We expect everyone participating in the community to abide by our Code of Conduct. Please read and follow it.
🤝 If you'd like to contribute, start by reading our Contribution Guide.
👾 Explore some good first issues.

Let's build great software together!

License

Shesha is available under the Apache License 2.0. Use it wisely!

shesha-framework's Issues

Duplication of 'InitialValues' variable onDataLoaded form settings

The initialValues variable is declared twice onDataLoaded

Steps to reproduce the behavior:

1. From any form configuration: https://function-adminportal-test.shesha.dev/shesha/forms-designer?id=93190f72-2447-4002-a584-f49f8319d7a1, click on the form settings
2. Click on Data Loaded code editor
3. Click on 'Variables' tab
4. Check initialValues

Expected behavior
Remove one initialValues variable as both of them does the same thing

Improve debug panel

1. Use metadata of components to show specific data
2. Allow to execute API of components with typed parameters

Update the component state after clearing the field on File and File List Component

SmartGov team wants to clear the field after saving a record. Currently, when you attach a file and save the record before submitting the entire parent data, the field does not get cleared out. The panel allows them to add a new invoice by populating the required values including attaching a file. You can repeat this multiple times. After adding the invoice, they clear the fields except the invoice attachment can't be cleared

System URL: https://pd-invoicetracking-adminportal-test.shesha.dev/dynamic/boxfusion.invoicetracking/register-requestforpayment/?mode=edit

Null values appear in DataTable columns and subform when utilizing a number field to display data

When utilizing the number field to display data, the column displays "null" in cells that do not contain any data including subform. If the column uses the default display component, it does not display null and on a subform

Steps to reproduce the behavior:

1. Click on this link: https://function-adminportal-test.shesha.dev/shesha/forms-designer?id=bbdf0d01-f33c-44c1-803e-b8db2aea1ab3
2. Go to the datatable configurations
3. Click Configure Columns and add a new column
4. Bind the column to a property
5. From the Display Component dropdown, select "Number field"
6. Save and Render the form

Expected behavior
When utilizing the number field to display data, the column must not display "null" in cells containing no data..

Update sidebar to use configurable actions and all latest changes like dynamic lists

Update sidebar to use configurable actions and all latest changes like dynamic lists

The `style` property on `Dropdown` doesn't apply CSS with `value` dataSource

When you apply styling on a dropdown component while dataSource type is value, the component does not respond to the styling

Steps to reproduce the behavior:

1. From the designer mode: https://function-adminportal-test.shesha.dev/shesha/forms-designer?id=65127122-2d1c-4a00-a0e1-17476e22dacb , click on the dropdown component
2. On the properties panel, scroll down and click 'dataSource' property
3. Select values option
4. Scroll down to style property and confirm the CSS script
5. Preview the form
6. Actual Results: The styling does not apply on the component, however when the dataSource type is referenceList, the styling does apply

Expected behavior
The styling should apply according to the CSS properties added on the component

Similar and should be done in conjunction with #545

The textfield component remains in edit mode when the form is in read mode

Text fields in the details view remain in edit mode even when the form is set to read mode

Steps to reproduce the behavior:

1. Render this link: https://function-adminportal-test.shesha.dev/dynamic/Boxfusion.SheshaFunctionalTests.Common/changeupdate-details?id=53041e90-5f84-40e6-9c83-02764fabbb4f
2. Check firstName and lastName fields

Expected behavior
The component should be in read mode when the formMode is set to read mode, adjusting its behavior accordingly based on the form state

Current behavior

Expected behavior

The 'style' property on Entity Reference does not respond to the CSS properties added

The styling does not display when you render the form

Steps to reproduce the behavior:

1. Drag and drop the Entity Reference component onto your form: https://function-adminportal-test.shesha.dev/dynamic/Shesha/eight-november?id=fea650aa-78c1-4fe9-94b7-a6ba47b05970
2. Configure all the mandatory properties
3. Apply some styling on the "Style" Property e.g return {border : "2px solid green"};
4. Save and render render the form

Expected behavior
The entity reference component should respond according to the properties added on the styling property

Improve the server-side validation

Sometimes we get just An internal error occurred during your request message, it means that the server-side validation is missing or doesn't handle some specific case (e.g. we try to save null value to the not nullable DB column)

Choose versioning model and delete all legacy versions of packages (npm and nuget)

Choose versioning model and delete all legacy versions of packages (npm and nuget).
We still have a lot of different versions and even names of the library (@shesha/reactjs vs @shesha-io/reactjs)

The custom buttons fail to adhere to form validations

If you choose to utilise custom buttons rather than the default buttons, and your form includes required fields validation, attempting to submit the form without entering the necessary values results in a successful submission without any blocking mechanism

Steps to reproduce the behavior:

1. From this URL: https://function-adminportal-test.shesha.dev/dynamic/Boxfusion.SheshaFunctionalTests.Common/Books-Table, render the form and click 'Add button' (the button is not disabled, while the property is set to true)
2. On 'Add New Book' form, you will notice that 'Name and Price' is mandatory from the form
3. Click on 'Save Book' button. NB: The button is custom

Expected behavior
The behavior should be the same as the default buttons(see attached screenshot), whereby it checks the mandatory fields and if they are empty, it displays an error message of 'this field is required' and the button should be disabled when the property is set to true

Review the `navigate` action

Review the navigate action and split it into two new ones navigate to form and navigate to URL. The Navigation to form action should use FormIdentifier instead of raw URL. As an alternative we can add an option to the navigate action

Add a placeholder property on 'Entity Picker' component

• Add a placeholder property
• When a user enters the placeholder text and renders the component, the text should display as a placeholder within the component

The 'style' property on 'Subform' does not respond to the CSS properties added

If you add styling on a subform component, the component does not respond to the styling added

Steps to reproduce the behavior:

1. From the designer mode: https://function-adminportal-test.shesha.dev/shesha/forms-designer?id=7344dfb6-2f2a-4b2b-87a6-bc2b5193c534, click on the subform component
2. On the properties panel, scroll down and click style property
3. There are CSS properties added on the code editor
4. Preview the form

Expected behavior
The styling should apply according to the CSS properties added on the component

Remove all obsolete components from the @shesha/reactjs

@shesa/reactjs contains a lot of components which were added in the very first version of the library when forms designer was under construction. We need to do a clean-up and remove all legacy code

Monaco code editor

Integrate monaco-editor (https://github.com/microsoft/monaco-editor) including code completion

Reconfigure functionaltests front-end build

Reconfigure functionaltests front-end build to fix type checks and enforce linting rules. Currently these checks are disabled because of wrong usage of the workspaces

Duplication of 'formMode' variable onFile List Changed

The formMode is duplicated onFile List Changed property

Steps to reproduce the behavior:

1. From this link: https://function-adminportal-test.shesha.dev/shesha/forms-designer?id=b5748710-abfb-4f2a-b50f-0ad6d2199df0, drag and drop 'File List' component
2. From the properties panel, scroll down to 'On File List Changed' property
3. Click on 'Edit in Code Editior'
4. Click on variables tab
5. Confirm the formMode

Expected behavior
Remove one formMode variable since both of them does the same

Review evaluation of all dynamic JavaScript expressions

Review evaluation of all dynamic JavaScript expressions:

1. Memorize expressions to prevent unneeded re-creation of them
2. Add a standard header (comment block) to the expression that can be used for identification of the source of the script (e.g. /* Generated by FormXXX.textFieldYYY.onChange property */)

Disabled property is not working on Autocomplete when using both value and JS

When you activate the disabled property, the component remains editable

Steps to reproduce the behavior:

1. Drag and drop the autocomplete component onto your create form: https://function-adminportal-test.shesha.dev/dynamic/Shesha/test-action
2. Configure the component accordingly and set the "Disabled" property to true/ return true when using JS
3. Render the form

Expected behavior
When disabled property is set to true, the component should be disabled

Enhancements to the Wizard component

1. The following events should be available for each step defined:
   • BeforeNext, AfterNext, BeforBack, AfterBack, BeforeCancel, AfterCancel
   • OnEnter - Triggered on entering the step regardless of the step it has come
2. It should be possible to define action to be taken on each of the events above through the usual
3. It should be possible to programmatically:
   • Get the step that is currently active
   • Jump to a step
4. Documentation should be updated to specify the additional events and when in the lifecycle they get triggered

CSS and layout improvements of the forms designer

CSS and layout improvements of the forms designer

1. Scrolling of the left and right panels should be independent

2. Make the right and left panels resizeable and the default size should be smaller

3. Reduce padding size on component list

4. Add bottom padding on the left panel

5. On left panel make 'Widgets' and 'Data' sections as tabs

6. Add buttons to access form history and form details, and duplicate buttons from the details view.
   Forms designer page should allow to:

• navigate to the form details view
• perform all the same operations as it's done on the details view (Get Json, Import Json etc.)
• open form history modal with ability to view each version in the designer

The size of the 'Date Field' component reduces when styling is applied

When styling is applied to the date field component, it unexpectedly reduces in size, leading to inconsistencies with other components

Steps to reproduce the behavior:

1. From this link: https://function-adminportal-test.shesha.dev/shesha/forms-designer?id=fae89470-461b-4866-8e99-d3100a439f78, click on membershipStartDate component
2. On the properties panel, scroll down to style section and click on 'edit in code editor'
3. Return your CSS and save the changes
4. Preview the form(top right settings icon and eye icon)

Expected behavior
The component size should not change, unless the styling applied is to reduce its size

FileList component allows file deletion when "Allow Remove" property is set to false

If allow remove is set to false, the delete icon still shows after attaching a file which allows a user to remove the attached file. This behavior does not adhere to the property setting

Steps to reproduce the behavior:

1. From designer mode link: https://function-adminportal-test.shesha.dev/shesha/forms-designer?id=77358438-e21e-4df2-9c02-716647282073, click on 'File List 1' to confirm the 'Allow Remove' property is unchecked
2. Preview the form
3. Attach a file and hover over the attached file

Expected behavior
When allow remove property is set to false, the delete icon should not show when you hover on the file attached

Related work item: [User Story 47408: Clean-up the 'Attachments Editor' component and provide support when owner is new entity still to be created](url)

Update configurable actions configurator (UI improvements)

1. Update configurable actions configurator (UI improvements), it should use generic ListEditor too. It should be possible to insert new actions before/after any of existing ones (e.g. the user should be able to add Show Confirmation Dialog action before the action without reconfiguration of all actions as it's currently done).
2. We can use the DevOps build pipeline configurator as a reference, i.e. remove OnSuccess and Success Handler and assume that each next task in the list will be execute only after a positive completion of the previous one

Form designer components review

Review components and make the following changes:

1. Remove Visibility property, check use-cases where it's used. Looks like this property was added to all components but it's not required for most of them or not required at all
2. Remove one of properties: disabled or readonly, we should use a single property for this purpose

Moved to #1032
3. Update all list settings to use generic ListEditor component. Note: functionality of this component should be extended to cover all use-cases

Review storybook stories and remove all ones which are used for debugging only

Review storybook stories and remove all ones which are used for debugging only

Time Picker component shows AM time instead of API returned time on read mode

In read mode, the Time Picker component is displaying AM time instead of accurately reflecting the time retrieved from the API

Steps to reproduce the behavior:

1. From this link: https://function-adminportal-test.shesha.dev/dynamic/Boxfusion.SheshaFunctionalTests.Common/book-details?id=8df415e3-834e-40ce-b867-d7014d3332b6, render the form and check 'Time' field
2. Check the value displayed on the time
3. Actual Results: The time displayed is 'AM'
4. Edit the form

Actual Results: When you are on edit mode, the component displays the correct value

Expected behavior
The value displayed on read mode should match it exactly the one received from the API

Remove `Use Raw Values` setting from Autocomplete, Dropdown, Entity References and Ref Lists

Remove Use Raw Values setting from Autocomplete, Dropdown, Entity References and Ref Lists. All use-cases should be handled by new settings

Clean-up of the form markup

Clean-up the form markup, the forms designer should save only properties which are declared on the component. Ideally it should be covered by a json schema

Misalignment of 'JS/Value' on the setting dialog for display, edit and create components when customizing dataTable columns

The button labeled "JS/Valvue" appears to be misaligned with the corresponding property. To configure a specific property using JS, you need to click the JS button located above that property.

Steps to reproduce the behavior:

1. Render this link: https://function-adminportal-test.shesha.dev/shesha/forms-designer?id=d9e57701-5328-4395-8d71-580fd21d2d0e
2. On the form designer, go to dataTable configurations and Customize Columns
3. Click each of the available columns
4. For each component, click on the configure button to see the setting dialog

Expected behavior
The JS/Value should be aligned with it's own property

Note: This issue affects create, edit and display configure setting

The JS/Value located inside the input fields hide the input value

On Autocomplete Component, the JS/ value property is placed on top of "Show Json" making it difficult to click "Show Json"

Properties input fields cut through the JS buttons

Time Picker component in dialog form fails to display time value

The time value is not being displayed on the Time Picker component when rendered within a dialog form

Steps to reproduce the behavior:

1. From this URL: https://function-adminportal-test.shesha.dev/dynamic/Boxfusion.SheshaFunctionalTests.Common/Books-Table, render the form
2. On the table view, click on the edit pencil of a record that has time value
3. Check time field

Expected behavior
The time value should display on the component. See the below component, I'm using textfield to display the time value

Add `required` property on Address component

1. Add Required Boolean property on Address component
   • When the property is to set true, a red asterisk should display to enforce users to enter the value before submitting
   • When the property is set to false, the user can submit without entering the value of the address

Remove ChildTable component

Remove ChildTable component, it should be replaced with a combination of other components.

1. Filters + CurrentFilter properties should be replaced with a single property Filter and it should be moved to the DataTableContext component
2. Add a migration to the component the will create a set of components (panel + buttonGroup + datatable)

Change the way to update visible and enabled components on the FormProvider

Allow 'delete' functionality to be a configuration on Notes component

When configuring the notes component, the delete functionality is visible by default when notes are present. A user should be able to choose whether to show the delete functionality or not.

1. Add a boolean property to allow deleting
   • If set to true, therefore a user should be able to delete the notes
   • If set to false, the delete bin should not display

Upgrade react applications to the latest NextJs version

1. Upgrade react applications to the latest NextJs version
2. Remove NextJs dependency from the @shesha/reactjs. Next router should be isolated using a new interface
3. Fix hydration problem, see below
   Error: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error

Second autocomplete fails to clear selection when updating first autocomplete/dropdown

Scenario 1: I have two autocompletes, the second is suppose to filter the data based on what have been selected on the first autocomplete. https://function-adminportal-test.shesha.dev/shesha/forms-designer?id=011a5a81-3ae4-4de5-ae52-d44ed150ed9f

Scenario 2: If you have dropdown and a autocomplete. The autocomplete filters the data based on what you have selected on the dropdown. https://function-adminportal-test.shesha.dev/shesha/forms-designer?id=ab82e99d-66e4-446c-a88f-2b0a11154cf3

Steps to reproduce the behavior:

1. Select address, immediately the members will be filtered
2. Select a member on the second autocomplete. NB: Keep note of the selected value
3. Clear the value selected on member autocomplete
4. Select a new value on the first autocomplete
5. Click on the second autocomplete and check the value you selected from step 2
   Actual Results: The selected value does not get cleared

Expected behavior
The selected value from the previous should be removed

Review form settings

Review form settings

1. Remove _formFields property, it should be replaced with a handler on the form level. Initially this property was added to ensure that we handle undefined values and untouched fields correctly
2. Review handlers and events, find a good way of transferring of the form parameters

Improve generic ListEditor component to allow insertion of new items before/after any of existing items

Improve generic ListEditor component to allow insertion of new items before/after any of existing items and add items directly to group. Currently we have to add items and drag them to a correct place. An example of the proposed UI:

Update project to use latest antd version

Update project to use latest antd version. We still use some properties which are marked as obsolete

Add Alias attribute for entities

Use the Alias attribute to define modified class names and namespaces

Failure to save changes when setting all step properties via JavaScript values on Tabs component

Despite setting properties programmatically(JS), the changes are not successfully saved.

Steps to reproduce the behavior:

1. From this link: https://function-adminportal-test.shesha.dev/shesha/forms-designer?id=ec278268-efa0-4a48-bdb7-0fcc23daaade, click on the tabs component/drag a new one
2. Click on 'Configure Tab Panes'
3. Add a new step item
4. Configure each step property using the JS value
5. Save your changes from the tab panes
6. Save your changes from the main page (top left)
7. Afterwards, refresh the form
8. Navigate back to 'Configure Tab Panes'
9. Click on the step you've configured

Expected behavior
The changes should be saved successfully regardless of the option being used

DataList: Support for sectioning/ grouping and reordering

Add support for sectioning/grouping list items by a chosen field.
This implementation should support/include the following properties:

1. Group By - the field by which items need to be grouped - e.g department, province etc
2. Grouping Section Background Color - the background color of the section header
3. Grouping Section Text Color - the text color of the section header
4. Collapsible - toggles whether the section is collapsible or not
5. Collapse By Default - determines if the section starts off collapsed or not.

The data list should support the features specified on this card: User Story 45707: Support for row grouping and enhance sorting and ordering on Table component

Review handling of the environment variables in the react applications

Review handling of the environment variables in the react applications, currently our application includes some sensitive data into the html pages. We need to pass environment variables by a safe way (check https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables). Note: it may require update of the pipelines. It also may be a one of reasons of hydration errors generated by NextJs

The 'onChange' event does not log property events

The onChange event is not functioning as expected, failing to log any events associated with the property. Consequently, the intended logging behavior is not observed when changes occur, hindering the accurate tracking and monitoring of property events

Steps to reproduce the behavior:

1. From this link: https://function-adminportal-test.shesha.dev/shesha/forms-designer?id=b5748710-abfb-4f2a-b50f-0ad6d2199df0, click on any component that has onChange event property e.g. TextArea
2. Console any variable
3. Render the form: https://function-adminportal-test.shesha.dev/dynamic/Boxfusion.SheshaFunctionalTests.Common/mergechanges-table
4. Check whether the events are logged or not

Expected behavior
The events should be logged

Note: This is affecting all components that have onChange event property such as textfield, textArea, datefield etc

Add a new attribute to set default views for entities

It should be possible to specify default value of views via an attribute on the back-end (see the image).
Use-case: a developer makes a package with default details/create forms, attaches it to the module as an embedded resource and mark entity with an attributes which links entity type with these forms.

The Entity Picker enables data capture even when the "Disabled" option is set to true

The component appears as if it has been disabled however when you click on the component the "Select Item" dialog displays. The dialog allows data capturing and the data capture can be successfully submitted to the backend. This behavior is observed only when the selected mode is set to multiple.

Steps to reproduce the behavior:

1. Drag and drop an entity picker into your create form: https://function-adminportal-test.shesha.dev/dynamic/Shesha/bank-table-view
2. Bind the entity picker to a property that allows multiple entries
3. Select "Multiple" from the "Mode" property
4. Set the "Disabled" property to true
5. Configure the Entity Type, Display Name, and Columns
6. Render the form

Expected behavior
If the disabled property is set to true, the component should be disabled and no action should be performed

Find attached video: https://github.com/shesha-io/shesha-framework/assets/151041759/8ade82f0-7537-43e0-a9ce-ca9c9c3e3e68

Forms: review default values functionality

Current implementation allows to set default values on the component level, these default values are passed to the Antd Form using form items. This approach is a source of ambiguity and conflicts.
Proposed approach:

1. Default values should be specified in a centralized manner
2. Default value editors on the component level should work as a proxy only, the real values should be saved on the form level (or on the model level)
3. The user should be able to override default values on the form settings level, for example we should be able to fill values of the child modal dialogs
4. Default values shouldn't be passed via the Form. Form Item, they should be passed via the model on the Form level

Address component displays [object,object] after selection with setFormValues configuration

If you have configured setFormValues and you select address, the address component displays "[object, object]" instead of the expected address values

Steps to reproduce the behavior:

1. From this designer link: https://function-adminportal-test.shesha.dev/shesha/forms-designer?id=5f750a9d-c9ed-4ad8-b281-88c62a40e06e, click on 'Address' component and navigate to 'OnSelect' property
2. There's a script that setForm data immediately after selecting address
3. Render the system URL link: https://function-adminportal-test.shesha.dev/dynamic/Shesha/address-component-table
4. Search for address on the address component
5. Select from the suggested options
   Actual Results: [Object, Object] gets displayed

Expected behavior
The selected address should display on the address component and populated the additional fields defined onSelect

Example of the expected behavior form Inventory
https://pd-inventory-adminportal-test.shesha.dev/dynamic/Shesha/Site/

1. Click on 'Create Site'
2. Search for address and select from the suggested options
   Actual Results: The other sub-fields are populated based on the address selected