CoreUI theme for FlaskAppbuilder
This theme is still very much a WIP. If you'd like to use it take a look at the fab_coreui_theme/templates/coreui/init.html and start overriding the blocks to make it your own.
This theme is meant to be with used with FlaskAppbuilder. Just grab the coreui_bp from fab_coreui_theme and you're ready to use the views. Here is an example app.
from flask_appbuilder.models.sqla.interface import SQLAInterface
from fab_coreui_theme.fab_coreui_theme import CoreUIBaseView, CoreUIModelView, CoreUISimpleFormView, coreui_bp
# Make sure you import your app and register the blueprint!
from .www import app
app.register_blueprint(coreui_bp)
# Create a base view that inherits from CoreUIBaseView
class MyView(CoreUIBaseView):
default_view = 'blank'
@expose('/blank')
@has_access
def blank(self):
return self.render_template(
'coreui/init.html'
)
# Register the view with AppBuilder
appbuilder.add_view(MyView, "My View", category='My View')
Make sure the FlaskAppbuilder is used. If you used the fab cli to initialize the project it should be in there somewhere.
import logging
from flask import Flask
from flask_appbuilder import AppBuilder, SQLA
from flask_appbuilder.menu import Menu
logging.basicConfig(format="%(asctime)s:%(levelname)s:%(name)s:%(message)s")
logging.getLogger().setLevel(logging.DEBUG)
app = Flask(__name__)
app.config.from_object("config")
db = SQLA(app)
appbuilder = AppBuilder(
app,
db.session,
menu=Menu(reverse=False),
)
from . import views # noqa
This registers the CoreUI Flask Blueprint. (This is only shown here for reference.)
# This is only shown for reference.
TEMPLATE_FOLDER = os.path.join(os.path.dirname(__file__), 'templates')
STATIC_FOLDER = os.path.join(os.path.dirname(__file__), 'static')
STATIC_URL_PATH = '/static/coreui'
# Use the Flask Blueprint to create an appized app and setup our routing
# https://flask.palletsprojects.com/en/2.0.x/blueprints/#templates
coreui_bp = Blueprint(
'coreui_theme', __name__,
template_folder=TEMPLATE_FOLDER,
static_folder=STATIC_FOLDER,
static_url_path=STATIC_URL_PATH
)
Then in your HTML templates you can bring in the static files relative to static -
{{url_for('coreui_theme.static',filename='coreui/node_modules/@coreui/coreui/dist/js/coreui.bundle.min.js')}}
from flask_appbuilder.models.sqla.interface import SQLAInterface
from fab_coreui_theme.fab_coreui_theme import CoreUIBaseView, CoreUIModelView, CoreUISimpleFormView, coreui_bp
# Make sure you import your app and register the blueprint!
from .www import app
app.register_blueprint(coreui_bp)
# Create a base view that inherits from CoreUIBaseView
class MyView(CoreUIBaseView):
default_view = 'blank'
@expose('/blank')
@has_access
def blank(self):
return self.render_template(
'coreui/init.html'
)
# Register the view with AppBuilder
appbuilder.add_view(MyView, "My View", category='My View')
from flask_appbuilder.fieldwidgets import BS3TextFieldWidget
from flask_appbuilder.forms import DynamicForm
from flask_babel import lazy_gettext
from wtforms import StringField
from wtforms.validators import DataRequired
from fab_coreui_theme.fab_coreui_theme import CoreUIBaseView, CoreUIModelView, CoreUISimpleFormView, coreui_bp
# Make sure you import your app and register the blueprint!
from .www import app
app.register_blueprint(coreui_bp)
# Declare the Form
class TestForm(DynamicForm):
TestFieldOne = StringField(
lazy_gettext("Test Field One"),
validators=[DataRequired()],
widget=BS3TextFieldWidget(),
)
TestFieldTwo = StringField(
lazy_gettext("Test Field One"),
validators=[DataRequired()],
widget=BS3TextFieldWidget(),
)
# Create the Form View and inherit from the CoreUISimpleFormView
class TestFormView(CoreUISimpleFormView):
form = TestForm
form_title = "This is my Test Form"
default_view = "this_form_get"
message = "My form submitted"
def form_post(self, form):
# process form
flash(as_unicode(self.message), "info")
# Register the view
appbuilder.add_view(TestFormView, "My form View",
icon="fa-group", label="My Test form")
from flask_appbuilder.models.sqla.interface import SQLAInterface
from fab_coreui_theme.fab_coreui_theme import CoreUIBaseView, CoreUIModelView, CoreUISimpleFormView, coreui_bp
# Make sure you import your app and register the blueprint!
from .www import app
app.register_blueprint(coreui_bp)
class ProductModelView(CoreUIModelView):
datamodel = SQLAInterface(ProductModel)
appbuilder.add_view(ProductModelView, "Products",
icon="fa-group", label="Products")
If you see something you don't like you can customize it by overriding the blocks in the templates.
See the Flask AppBuilder docs on Customization to customize the theme. You can fork this project, or create a new project that overrides blocks and templates.
In your app create a templates/mytheme/index.html file.
Override a block entirely -
{% extends "coreui/init.html" %}
{% block content %}
<h1>My content!</h1>
{% endblock %}
Extend a block -
{% extends "coreui/init.html" %}
{% block content %}
{{ super() }}
<h1>My content!</h1>
{% endblock %}
See the fab_coreui_theme/templates/coreui/init.html for the menus, breadcrumbs, and sidebars.
Please note that menus are not implemented the way they are in FlaskAppbuilder and registering a view does not populate the menus.
Some relevant docs:
Install the javascript node_modules.
# Clone or fork the repo and clone it locally
cd fab_coreui_theme/coreui_theme/static
npm install
# or use the MakeFile - make npm-install
If this command gives you trouble try removing the package-lock.json and deleting the node_modules folder.
Then you can reference the js and css files as:
<script src="{{url_for('coreui_theme.static',filename='coreui/node_modules/thing.js')}}"></script>
<link
href="{{url_for('coreui_theme.static',filename='coreui/node_modules/thing.css')}}"
rel="stylesheet"
/>
- Free software: MIT license
- Documentation: https://fab-coreui-theme.readthedocs.io.
- CoreUI Theme - Flask Blueprint
- CoreUI Theme - Flask AppBuilder BaseView
- CoreUI Theme - Flask AppBuilder ModelView
- CoreUI Theme - Flask AppBuilder SimpleFormView
This package was created with Cookiecutter and the audreyr/cookiecutter-pypackage project template. It makes use of Flask AppBuilder and CoreUI.