Giter Club home page Giter Club logo

mendix-planner-widget's Introduction

Apache License Dependencies DevDependencies Support Studio GitHub release GitHub issues

PlannerWidget

Mendix Planner Widget using Ant Design Table (MIT License)

AppStore

Show a planning for resources on specific dates

screenshot

Note: This widget is under construction and can be used as the basis for other planner widgets. There is a TODO list on the bottom with ideas to implement. Feel free to make changes, the widget is released under the Apache 2 license.

Features

  • Show a full month based on the year- and month number (context object attribute)
  • Load a list of resources to display using XPath/Microflow/Nanoflow
  • Do 1 call (Microflow/Nanoflow) to load all the entries for the month
  • Click/Double click on Resource/Entry to execute a microflow/nanoflow or open a page/popup
  • Use HTML to do advanced markup for Entries and your Resource title, using a Nanoflow
  • The widget is subscribed to all viewable objects, meaning it will automatically update the view when an object changes
  • Mendix Studio compatible (some features like setting an Entity might not be editable in Mendix Studio, you will need Mendix Studio Pro for that)

Usage

This is an example use case. This corresponds to the Online Demo

Data Model

Consider the following data model:

data-model

  • DummyView is used as the context object and has two relevant integers, Year and Month, used for the planner
  • Resource is the Company that is displayed on the first column of the rows. Title can be used, but we can also use a Nanoflow to show more data (see below);
  • PlanningEntry is the entry that references to the Resource. An entry has a specific non-localized Date that is used to determine on which day it takes place. Title can be used to display, but we can also use a Nanoflow
  • PlannerGetEntryHelper is a helper object that is needed to get all the entries for a specific month. The widget will fill in the start- and enddate and use the reference set to determine which entries it will load for which resources

1. Resources

settings resources FOSSA Status

  • For the rows you will define a Resource entity
  • This can be over XPath/Microflow/Nanoflow
  • The title can be set to an attribute, or a Nanoflow (returning a string). It can be HTML and will be rendered as such, but you have limited capabilties. The widget will do some sanitizing, but make sure you do not open yourself up to XSS, so when using some kind of user input, make sure it is sanitized server-side

2. Entries

settings entries

2.1 Entity

  • Define the Entry entity. It is important to set the reference back to the Resource entity

Note that the widget (currently) only supports 1 entry per day per resource. If you return multiple, it will use the latest. This is all done in the widget. In a future release we might be able to add the capability of using more than 1. Also, currently an Entry is tied to a certain date, in the future this might become a date range.

2.2 Helper

  • Entry Helper entity, as explained in Data Model, is used to retrieve Entry objects.

2.3 UI

  • For the title of the entry, see the explanation on Resource titles, the same applies here.

3. View

settings view

  • For viewing a specific month, please refer to the two attributes for Year and Month. It should be noted that the developer has to make sure the Month attribute is bigger than 0 (so start at 1) and smaller than 13 (so end with 12).

4. UI Settings

settings ui

4.1 Widths

  • The left column and the cell width can be set to a specific width. This is necessary in the table to make sure header row and left column sync up to the content. This cannot be made responsive (unfortunately)

4.2 Locking

  • The left column and the header row can be locked, meaning it will stay visible while scrolling. This is enabled by default, but can be switched off when there are issues (notably IE 11 and scrollbars might be an issue)

4.3 Size

  • The widget can be sized in various ways. Using flexbox it is even possible to make the table page wide (and keep the left column/top bar locked)

5. Events

settings events

  • For both the Resource (left most column) as well as Entry you can define an on-click action, opening a page or executing a microflow/nanoflow
  • When clicking on an empty spot, you can execute a nanoflow/microflow. This will use the Entry Helper Entity to set a specific date and resource reference, so you can create your own Entry object

Demo project

You can find the demo here: https://planningwidgettest-sandbox.mxapps.io/

I might release a demo project as download later on (right now that is not in shape yet)

Issues, suggestions and feature requests

Please report your issues/suggestion/requests on Github

TODO

  • Show multiple entries on 1 date
  • Add ability to control class name on entry
  • Refactor class names
  • Add Tree structure to show underlying entries

License

Apache-2

FOSSA Status

mendix-planner-widget's People

Contributors

fossabot avatar jeltemx avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.