×
  • Healthcare
  • Services
    • E-Commerce Website Development
    • E-Learning Platform
    • Website Development
    • Custom ERP Development
    • Web Designing
    • Job Portal Software Development
  • Casestudy
    • Digitalise your business with e-commerce website
    • ERP system for textile industries
    • All-inclusive e-learning platform custom made to meet your needs
    • Fitness case study – Online Fitness Software for DavidCosta
    • Recruitment Software And Management System To Stay Ahead Of Market Competition
  • Industry
    • Education & E-Learning
    • Textile Solutions
    • Retail Industry
    • Fitness & Training
    • Recruitment
  • Blog
  • Contact Us
  • Career
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
☰

Knovator Technologies

Web and App Solutions

  • Services
    • First Sub Menu
      • Website Development
        Website Development To create unique online presence.
      • E-Commerce Development
        E-Commerce Development For online stores, customer-centric solutions & more.
      • E-Learning Platform
        E-Learning Platform Expert E-Learning Platform dev for online education.
    • Second
      • Custom ERP Development
        Custom ERP Development Expert ERP dev for unique business solutions, streamline operations & more.
      • Web Designing
        Web Designing For stunning online visuals, attractive, and user-friendly.
      • WordPress Plugin Development
        WordPress Plugin DevelopmentExpert WordPress plugin dev for custom functionality.
  • Casestudy
  • Industry
    • First Sub Menu
      • Education & E-Learning
        Education & E-Learning Empowering education with interactive learning experiences
      • Textile Solutions
        Textile Solutions Grow using innovative and automated ERP solutions
      • Retail Industry
        Retail Industry Optimizing the retail experience using technology
    • Second
      • Fitness & Training
        Fitness & TrainingEngaging, interactive solutions for fintess institution
      • Recruitment
        Recruitment Job Portal for efficient talent acquisition & hiring process
  • Case Study
  • Products
    • First Sub Menu
      • Recruitment
        Job Board Software Designed to adapt and grow with your needs
    • Second
      • Learning Management System
        Learning Management System Built to handle growth and adapt to changing needs
  • Blog
    • First sub menu
      • Healthcare
        Healthcare Get insights from our blogs on the new technical developments
    • Second
      • Education & E-Learning
        Education & E-Learning Discover the latest industry trends for cutting-edge education & elearning solutions.
    • third
      • Healthcare
        Recruitment Expert guidance on job portal development for an efficient and effective hiring process
  • Career
  • Contact Us
Faster application development with knovator/masters package Part – 2
Free and open-source software

Home » Blog » Faster application development with knovator/masters package Part – 2

Faster application development with knovator/masters package Part – 2

September 16th, 2022 3 mins
Share
Faster application development with knovator masters package Part 2 - Knovator Technologies

This is Part 2 of using @knovator/masters in your application so that you don’t have to build masters from scratch.

@knovator/master-admin

In Part 1 we explained how to use @knovator/masters-node in your backend application. Here we will see how to use @knovator/masters-admin in your react application.

It provides built-in functionalities for Add, Edit, Delete, Pagination, Search, and supports all sorts of customizations as well, like

  • Adding authentication through JWT token
  • Managing Permissions
  • Arranging Search, Add Button, Table, Pagination, Form components individually
  • Setting Pagination Limits
  • Changing Styles
  • Sorting
  • Sequencing
  • Customizing Form & Table Fields, and many others

Setup

To start using @knovator/masters-admin we should be having simple ReactJS or NextJS application ready.

So let’s create a ReactJS application and install @knovator/masters-admin into it.

npx create-react-app my-app
cd my-app
npm i @knovator/masters-admin

Usage

@knovator/masters-admin exports the following components to work with,

  • Provider – Wrapper component to wrap Master and SubMaster components
  • Master – Component for Masters functionality
  • SubMaster – Component for SubMasters functionality

Integrating Masters

  • By only writing the following code, we get all mentioned functionalities to manage Masters
import { Provider, Master } from "@knovator/masters-admin";

const App = () => {
  return (
    <div>
      <Provider baseUrl="http://localhost:8080">
        <h2>Master</h2>
        <Master />
      </Provider>
    </div>
  )
}

KMS_Master-View.png

  • Of course, things are not set in stone we can customize parts as well. For example, we can put Table, Search, and Pagination components individually and update permissions and limits for the data listing as below.
<Master
  permissions={{ add: false, list: true, update: true, destroy: true }}
  limits={[7, 14, 21]}
>
  <div className="search">
    <Master.Search />
  </div>
  <div className="content>
    <Master.Table />
    <Master.Pagination />
  </div>
</Master>
  • You can read more information about possible customizations at github.

Integrating SubMasters

  • Similar to Masters, we can integrate SubMasters as well. SubMasters data are dependent on Masters data, as we select the master item, submaster data gets updated.
  • Master component comes with Lister component, which helps in selecting the Master item.
import { Provider, Master, SubMaster } from "@knovator/masters-admin";

const App = () => {
  return (
    <div>
      <Provider baseUrl="http://localhost:8080">
        <Master>
          <Master.Lister />
          <SubMaster>
            <SubMaster.Table />
            <SubMaster.Pagination />
          </SubMaster>
        </Master>      
      </Provider>
    </div>
  )
}

image.png

  • Similar to the Master component we can provide all kinds of customizations in the SubMaster component as well.

Changing Styles

  • Masters package is built with a set of classes, the styling of any part can be changed just by adding the required CSS to the class in your application.
  • For example, we can change button colors by following the style.
    .kms_btn-primary:disabled {
      background-color: brown;
    }
    

image.png

You can read more information about possible customizations at github.

Found useful to you? Please give it a try and feel free to contact us if found any issues.

facebook-icon twitter-icon pintrest-icon instagram-icon
Bhavik Chavda
Bhavik Chavda
facebook-icon twitter-icon linkedin-icon
Passionate full stack developer with specialization in JavaScript, NodeJS and ReactJS. Well versatiled in developing Full Stack Applications, Building features and Writing optimized code.

Related Articles

Automate the process of image resizing with @knovator/image-resizer

Automate the process of image resizing with @knovator/image-resizer

Do you ever encounter a situation where a user uploads one image and you have to change its resolution to show it in mul...

Free and open-source software
12 Sep 2022
Streamline All Your App Development Needs With Knovator Masters Pack

Streamline All Your App Development Needs With Knovator Masters Pack

Have you ever noticed re-building masters functionality every time in your new application? Yes, we also noticed ...

Free and open-source software
25 Aug 2022
X
Request a Free Quote
Expert Tech Guidance
Industry Research
Free Project Estimation
Dedicated Support
  • Max. file size: 100 MB.
  • This field is for validation purposes and should be left unchanged.

Looking to build a web or
mobile app?
Find how we helped 100+ clients in building web and mobile
apps at a low cost!

Request a FREE Quote
Whats App
Together we can do great things.

Get free technical consultation

Speak to our experts to get the customised app, a timeline for the project and the costing.

Get your app faster

Instant prototype, faster application development and delivery.

Aftercare

We will maintain your project to keep it running smoothly.
Get in touch with us
  • This field is for validation purposes and should be left unchanged.

knovator logo
1st Floor, B/45-46 Ram Krishna Society, Lambe Hanuman Rd, Near Ram Krushna School, Surat, Gujarat 395006
561 bridge ave, Windsor Ontario,
N9B 2M3, Canada
+91-94995 01397
[email protected]
[email protected]
DMCA.com Protection Status
About Us
  • Blog
  • Career
  • Contact Us
  • Privacy Policy
Our Services
  • Custom ERP Development
  • Website Development
  • E-Commerce Website Development
  • E-Learning Platform
  • Web Designing
Products
  • Job Board Software
  • Learning Management System
Industry Expertise
  • Education
  • Textile
  • Retail
  • Fitness & Training
  • Recruitment
Resources
  • How To Know If A Free WordPress Plugin Is Worth Using
  • How to Use an LMS in Your Onboarding Process
  • Kickstart Your Recruitment Business With A Seasoned Job Portal Development Company
  • How Technology Is Transforming The Education Sector

Copyright © 2023 · All Rights Reserved by Knovator Technologies