
That’s the traditional question that has plagued IT leaders for a very long time. While the traditional approach has always been to build, with the advent of SaaS products the equation changed a bit owing to many conveniences that SaaS products provide. While one may be tempted to believe that’s a happy ending, its rarely the case with the ever-evolving technology landscape.
Enter Low code! The most convenient way to build custom apps, enable citizen development, test out business ideas and workflows with a very rudimentary tech team. Low code capabilities have evolved over the years, enabling developers to build enterprise grade apps, with all the bells and whistles of enhanced security, single sign-on functions, and deployment in cloud of their choice.
Now here’s another extension that low-code app development solutions can provide – building custom widgets.
Talk to our experts today to know how Indium can make this powerful low-code technology work for your business, so that you can keep innovating for your customers.
Get in touch
Specifically in the case of Mendix, custom widgets are a part of the user interface in your Mendix app that enables functionality and interaction with the users of the app.
These custom widgets bridge the gap between using standard Mendix components (for example, buttons and list views) and creating very specific components yourself. A custom widget gives you a solution if you need a specific user experience that Mendix does not provide out of the box.
This blog provides end-to-end details on the how and what of custom widget creation and how to manage the some of the common issues arising in the process.
Before starting on how to create the custom widget, we need to complete the following installation:
This is a good read: Using a Low Code Development Platform (LCDP) like Mendix for Business Transformation
Now we are going to create an EMI Calculator widget on a blank Mendix application. The widget should calculate Monthly EMI based on the interest and months selected from the UI.
a) Creating a Blank App:
Open Mendix Studio Pro and create a new test app by selecting File > New App from the top menu bar and then Blank App. Make sure the application is up and running without any errors.
b) Creating a Blank Widget:
After deleting the files, open the emicalculator.jsx file and remove the dependencies from the script file as below
c) Modifying the Script:
Now you can place the widget on your pages, and you can start using it. After running the project, you can your widget on your screen.
d) Explaining the Code:
npm start
. This process will bundle the widget and generate the properties into typings/<filename>. const Emiloan = (props) => {
// setting up values in reactjs
let [months, setMonths] = useState(0);
let [interestRate, setInterestRate] = useState(0.0);
let [amount, setAmount] = useState(0);
let [totalAmount, setTotalAmount] = useState(0);
let [totalInterest, setTotalInterest] = useState(0.0);
let [finalAmount, setFinalAmount] = useState(0.0);
const slidersLabels = ['Interest Rate', 'Months'];
// custom action like click events and passing data
const {onAdd, onEdit, onRemove, payload, setPayload} = customAction(props)
const onValueChange = (e) => {
setInterestRate(parseFloat(e.target.value));
totalAmountCalculation(amount, months, parseFloat(e.target.value));
}
const onValueChangeMonths = (e) => {
setMonths(parseInt(e.target.value));
totalAmountCalculation(amount, parseInt(e.target.value), interestRate);
}
const onchangeInput = (e) => {
setAmount(parseInt(e.target.value));
totalAmountCalculation(parseInt(e.target.value), months, interestRate);
}
const totalAmountCalculation = (amount, months, interestRate) => {
if (amount != 0 && months!= 0 && interestRate!= 0) {
let interest = (amount * interestRate)/months;
setTotalInterest(interest.toFixed(2));
let total = ((amount/months) + interest);
setTotalAmount(total.toFixed(2));
let finalTotalAmountPaid = total.toFixed(2) * months;
setFinalAmount(finalTotalAmountPaid);
} else {
setTotalAmount(0);
}
}
return (
const Emiloan = (props) => {
// setting up values in reactjs
let [months, setMonths] = useState(0);
let [interestRate, setInterestRate] = useState(0.0);
let [amount, setAmount] = useState(0);
let [totalAmount, setTotalAmount] = useState(0);
let [totalInterest, setTotalInterest] = useState(0.0);
let [finalAmount, setFinalAmount] = useState(0.0);
const slidersLabels = ['Interest Rate', 'Months'];
// custom action like click events and passing data
const {onAdd, onEdit, onRemove, payload, setPayload} = customAction(props)
const onValueChange = (e) => {
setInterestRate(parseFloat(e.target.value));
totalAmountCalculation(amount, months, parseFloat(e.target.value));
}
const onValueChangeMonths = (e) => {
setMonths(parseInt(e.target.value));
totalAmountCalculation(amount, parseInt(e.target.value), interestRate);
}
const onchangeInput = (e) => {
setAmount(parseInt(e.target.value));
totalAmountCalculation(parseInt(e.target.value), months, interestRate);
}
const totalAmountCalculation = (amount, months, interestRate) => {
if (amount != 0 && months!= 0 && interestRate!= 0) {
let interest = (amount * interestRate)/months;
setTotalInterest(interest.toFixed(2));
let total = ((amount/months) + interest);
setTotalAmount(total.toFixed(2));
let finalTotalAmountPaid = total.toFixed(2) * months;
setFinalAmount(finalTotalAmountPaid);
} else {
setTotalAmount(0);
}
}
return (
const Emiloan = (props) => {
// setting up values in reactjs
let [months, setMonths] = useState(0);
let [interestRate, setInterestRate] = useState(0.0);
let [amount, setAmount] = useState(0);
let [totalAmount, setTotalAmount] = useState(0);
let [totalInterest, setTotalInterest] = useState(0.0);
let [finalAmount, setFinalAmount] = useState(0.0);
const slidersLabels = ['Interest Rate', 'Months'];
// custom action like click events and passing data
const {onAdd, onEdit, onRemove, payload, setPayload} = customAction(props)
const onValueChange = (e) => {
setInterestRate(parseFloat(e.target.value));
totalAmountCalculation(amount, months, parseFloat(e.target.value));
}
const onValueChangeMonths = (e) => {
setMonths(parseInt(e.target.value));
totalAmountCalculation(amount, parseInt(e.target.value), interestRate);
}
const onchangeInput = (e) => {
setAmount(parseInt(e.target.value));
totalAmountCalculation(parseInt(e.target.value), months, interestRate);
}
const totalAmountCalculation = (amount, months, interestRate) => {
if (amount != 0 && months!= 0 && interestRate!= 0) {
let interest = (amount * interestRate)/months;
setTotalInterest(interest.toFixed(2));
let total = ((amount/months) + interest);
setTotalAmount(total.toFixed(2));
let finalTotalAmountPaid = total.toFixed(2) * months;
setFinalAmount(finalTotalAmountPaid);
} else {
setTotalAmount(0);
}
}
return (
<div><span>
Enter Amount
</span>
<div>
<input style={{
width: "250px",
height: "30px",
color: "red"
}} type="number" value={amount} onChange={(e) => onchangeInput(e)}></input>
</div>
<div>
{slidersLabels[0]} - {interestRate} %
<input style={{
width: "50%"
}}
id={slidersLabels[0]}
type="range"
step="0.01"
min="0" max="50" value={interestRate}
onChange={(e) => onValueChange(e)}
/>
</div>
<div>
{slidersLabels[1]} {months}
<input style={{
width: "50%"
}}
id={slidersLabels[1]}
type="range"
defaultValue="0" value={months}
min="0" max="100"
onChange={(e) => onValueChangeMonths(e)}
step="1" />
</div>
<div>
<span>Monthly Payment : </span> {totalAmount}
</div>
<div>
<span>Total Amount To be Paid : </span> {finalAmount.toFixed(2)}
</div>
</div>
)
}
<widget>
element. This is the root element that will contain all our settings for this widgetBoolean Value: This is to pass the Boolean value
Static Integer, Static Decimal, and Enum Values:
Icon and Image:
Add-Ons
Learn how Indium helped a middle eastern government services company build applications using Mendix
As a Mendix development partner for over 5 years, Indium provides the best-in-class Mendix services such as Mendix Architecture and Design, Rapid Custom Application Development, Indium Integrations Foundry for Mendix, Data Migration and Deployment and Mendix QA Services.
By Indium
By Indium
By Uma Raj
By Uma Raj
By Abishek Balakumar